{% extends "user/base-users-table.html" %}

{% block after_rank_head %}
  <th></th>
{% endblock %}

{% block after_rank %}
  <td><img loading="lazy" style="max-width: none;" class="user-img" src="{{ gravatar(user, 40) }}" height="40px" width="40px"></td>
{% endblock %}

{% block user_footer %}
  <span style="margin-left: 0.5em">{% if user.rating %}{{ rating_number(user) }}{% endif %}</span>
  <div class="gray" style="font-weight: 600; margin-top: 0.2em">{{ user.first_name or ''}}</div>
{% endblock %}

{% block after_point_head %}
  <th class="problems">
    {% if sort_links %}<a href="{{ sort_links.problem_count }}">{% endif %}
    {{ _('Problems') }}
    {%- if sort_links %}{{ sort_order.problem_count }}</a>{% endif %}
  </th>
  <th class="about-column">{{ _('About') }}</th>
{% endblock %}

{% block username_head_extra %}
  <span style="margin-left: 0.5em" class="header rank">
    {% if sort_links %}<a href="{{ sort_links.rating }}">{% endif %}
    <span class="rate-group">
      <svg class="rate-box" viewBox="0 0 16 16">
        <circle cx="8" cy="8" r="7" stroke="white"></circle>
        <path clip-path="url(#rating-clip)" d="M0 16v-4.8h16 0v16z" fill="white"></path>
      </svg>
    </span>
    {%- if sort_links %}{{ sort_order.rating }}</a>{% endif %}
  </span>
{% endblock %}

{% block after_point %}
  <td class="user-problem-count">{{ user.problem_count }}</td>
  <td>
    <div class="about-td">
      {% cache 86400 'user_about' user.id %}
        {% if user.about %}
          {{ user.about|markdown(lazy_load=True)|reference|str|safe }}
        {% endif %}
      {% endcache %}
    </div>
  </td>
{% endblock %}