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

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

{% block after_rank %}
    <td><img style="border: 2px solid lightblue; max-width: none; border-radius: 50%" src="{{ gravatar(user, 45) }}" height="45px" width="45px"></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.user.first_name if user.user.first_name else ''}}</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">
            {% if user.about %}
                {% cache 86400 'user_about' user.id MATH_ENGINE %}
                    {{ user.about|markdown(lazy_load=True)|reference|str|safe }}
                {% endcache %}
            {% endif %}
        </div>
    </td>
{% endblock %}