{% extends "base.html" %}

{% block media %}
    {% block user_media %}{% endblock %}

    <style>
        .user-gravatar {
            display: block;
            padding-right: 15px;
            width: 135px;
        }

        .user-gravatar img {
            width: 135px;
            height: 135px;
            display: block;
            border-radius: 6px;
        }

        .page-title {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
    </style>
{% endblock %}

{% block js_media %}
    {% block user_js_media %}{% endblock %}
{% endblock %}

{% block body %}
    <div class="user-info-page">
        <div class="user-sidebar">
            <div class="user-gravatar">
                <img src="{{ gravatar(user, 135) }}" width="135px" height="135px">
            </div>
            <br>

            <div><b>
                {%- trans trimmed counter=user.problem_count %}
                    {{ counter }} problem solved
                {% pluralize %}
                    {{ counter }} problems solved
                {% endtrans -%}
            </b></div>

            {% if not user.is_unlisted %}
                <div><b class="semibold">{{ _('Rank by points:') }}</b> #{{ rank }}</div>
            {% endif %}
            <div>
                <b class="semibold">{{ _('Total points:') }}</b>
                <span title="{{ user.performance_points|floatformat(2) }}">
                    {{ user.performance_points|floatformat(0) }}
                </span>
            </div>

            <br>
            <div>
                <a href="{{ url('all_user_submissions', user.user.username) }}">{{ _('View submissions') }}</a>
            </div>

            {% if ratings %}
                <br>
                <div><b>{{ ratings|length }} contests written</b></div>
                {% if not user.is_unlisted %}
                    <div><b class="semibold">{{ _('Rank by rating:') }}</b> #{{ rating_rank }}</div>
                {% endif %}
                <div><b class="semibold">{{ _('Rating:') }}</b> {{ rating_number(rating) }}</div>
                <div><b class="semibold">{{ _('Volatility:') }}</b> {{ rating.volatility }}</div>
                <div><b class="semibold">{{ _('Min. rating:') }}</b> {{ rating_number(min_rating) }}</div>
                <div><b class="semibold">{{ _('Max rating:') }}</b> {{ rating_number(max_rating) }}</div>
            {% endif %}
        </div>
        <div class="user-content">{% block user_content %}{% endblock %}</div>
    </div>
{% endblock %}