{% extends 'base.html' %}
{% load i18n %}
{% load url %}
{% load guardian_tags %}
{% load meta_attr %}
{% load evaluation_extras %}
{% load humanize %}
{% load profiles %}

{% block title %}{% blocktrans with profile.user.username as username %}
    {{ username }}'s profile
{% endblocktrans %}{% endblock %}
{% block content_title %}
    <h2>{{ profile.user.username }} {% if profile.user.get_full_name %}(
        {{ profile.user.get_full_name }}
        ){% endif %}</h2>{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href>Users</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ profile.user.username }}</li>
    </ol>
{% endblock %}

{% block content %}
    <div id="details" class="row">
        {% block profile_details %}
            <div class="col-sm-3">
                <div class="embed-responsive embed-responsive-1by1 mb-3">
                    <img class="card-img-top embed-responsive-item rounded-circle"
                         {% if profile.mugshot %}
                            src="{{ profile.mugshot.x20.url }}"
                            srcset="{{ profile.mugshot.x10.url }} 1x,
                                    {{ profile.mugshot.x15.url }} 1.5x,
                                    {{ profile.mugshot.x20.url }} 2x"
                         {% else %}
                            src="{{ profile.get_mugshot_url }}"
                         {% endif %}
                         style="display: block; margin: auto;"
                         alt="{% trans "Your mugshot" %}"/>
                </div>
                <div>
                    {% if profile.user.get_full_name %}
                        <h2 class="mb-0">{{ profile.user.get_full_name }}</h2>
                        <p class="lead text-muted">{{ profile.user.username }}</p>
                    {% else %}
                        <h2 class="mb-3">{{ profile.user.username }}</h2>
                    {% endif %}

                    {% if profile.user.verification.is_verified %}
                        <span class="btn btn-sm btn-outline-success disabled mb-3" title="Verified User"><i
                                class="fas fa-user-check"></i></span>
                    {% endif %}

                    {% get_obj_perms request.user for profile as "profile_perms" %}
                    {% if "change_userprofile" in profile_perms %}
                        <ul class="list-group mb-3">
                            {% if not profile.user.verification %}
                                <a class="list-group-item list-group-item-action"
                                   href="{% url 'verifications:create' %}">
                                    <i class="fas fa-user-check"></i>&nbsp;Request Verification
                                </a>
                            {% else %}
                                <a class="list-group-item list-group-item-action"
                                   href="{% url 'verifications:detail' %}">
                                    <i class="fas fa-user-check"></i>&nbsp;Verification Status
                                </a>
                            {% endif %}
                            <a class="list-group-item list-group-item-action"
                               href='{% url 'profile-update' user.username %}'><i
                                    class="fa fa-edit fa-fw"></i>&nbsp;{% trans "Edit profile" %}</a>
                            {% if profile.user.has_usable_password %}
                                <a class="list-group-item list-group-item-action"
                                   href='{% url 'account_change_password' %}'><i
                                        class="fa fa-key fa-fw"></i>&nbsp;{% trans "Change password" %}
                                </a>
                            {% endif %}
                            <a class="list-group-item list-group-item-action"
                               href='{% url 'api-tokens:list' %}'><i
                                    class="fas fa-unlock fa-fw"></i>&nbsp;{% trans "Manage API Tokens" %}</a>
                        {% if request.user|has_2fa_enabled %}
                            <a class="list-group-item list-group-item-action" href="{% url 'two-factor-backup-tokens' %}" title="Two-Factor Authentication Settings"><i
                                   class="fas fa-qrcode fa-fw"></i>{% trans "2FA Settings" %}</a>
                        {% else %}
                            <a class="list-group-item list-group-item-action" href="{% url 'two-factor-setup' %}" title="Enable Two-Factor Authentication"><i
                                   class="fas fa-qrcode fa-fw"></i>{% trans "Enable 2FA" %}</a>
                        {% endif %}
                        </ul>
                    {% endif %}

                    <ul class="list-unstyled">
                        {% if profile.country %}
                            <li class="my-1"><i class="fa fa-fw fa-map-marker-alt"></i>&nbsp;{{ profile.country.name }}
                            </li>
                        {% endif %}
                        {% if profile.institution %}
                            <li class="my-1"><i class="fa fa-fw fa-university"></i>&nbsp;{{ profile.institution }}</li>
                        {% endif %}
                        {% if profile.department %}
                            <li class="my-1"><i class="fa fa-fw fa-building"></i>&nbsp;{{ profile.department }}</li>
                        {% endif %}
                        {% if profile.website %}
                            <li class="my-1"><i class="fa fa-fw fa-link"></i>&nbsp;<a
                                    href="{{ profile.website }}">Website</a></li>
                        {% endif %}
                    </ul>
                    {% if profile.display_organizations and organizations %}
                            <h5>Organizations</h5>
                            <ul class="list-unstyled">
                                 {% for organization in organizations %}
                                   <a href="{{ organization.get_absolute_url }}">
                                     <img width ="40" height ="40"
                                                 loading="lazy"
                                                 src="{{ organization.logo.x20.url }}"
                                                 srcset="{{ organization.logo.x10.url }} 1x,
                                                         {{ organization.logo.x15.url }} 1.5x,
                                                         {{ organization.logo.x20.url }} 2x"
                                                 title="{{organization.title}}"
                                                 alt="{{ organization }} Logo"></a>
                                 {% endfor %}
                            </ul>
                    {% endif %}

                    <h5>Statistics</h5>
                    <ul class="list-unstyled">
                        <li>Member for {{ profile.user.date_joined|timesince }}</li>
                        {% if num_submissions %}
                            <li>{{ num_submissions }} challenge submissions</li>
                        {% endif %}
                        {% if num_algorithms_run %}
                            <li>{{ num_algorithms_run }} algorithms run</li>
                        {% endif %}
                    </ul>
                </div>

            </div>
            <div class="col">
                <h3>Activity Overview</h3>
                <div class="row equal-height mx-n2">
                    {% for object in object_list %}
                        <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-3 px-2">
                            <div class="card gc-card">
                                <a class="stretched-link" href="{{ object.get_absolute_url }}"
                                   title="View {{ object|meta_attr:'verbose_name'|title }}"></a>
                                <div class="embed-responsive embed-responsive-1by1">
                                    {% if object.logo %}
                                        <img class="card-img-top embed-responsive-item"
                                             loading="lazy"
                                             src="{{ object.logo.x20.url }}"
                                             srcset="{{ object.logo.x10.url }} 1x,
                                                     {{ object.logo.x15.url }} 1.5x,
                                                     {{ object.logo.x20.url }} 2x"
                                             alt="{{ object }} Logo">
                                    {% endif %}
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title mb-0">
                                        {% firstof object.title object.short_name %}
                                        {% if not object.public %}
                                            <i class="fas fa-lock above-stretched-link"
                                               title="{{ object|meta_attr:'verbose_name'|title }} is private"></i>
                                        {% endif %}
                                    </h5>
                                    <span class="badge badge-info above-stretched-link"
                                          title="
                                                  {{ object|meta_attr:'verbose_name'|title }} {% firstof object.title object.short_name %}">
                                        <i class="far fa-circle fa-fw"></i>
                                        {{ object|meta_attr:'verbose_name'|title }}
                                    </span>
                                    <span class="badge badge-info above-stretched-link"
                                          title="{{ profile.user.username }} is
                                                  {{ object_role|get_key:object }} of this
                                                  {{ object|meta_attr:'verbose_name' }}">
                                        <i class="fas fa-user fa-fw"></i>
                                        {{ object_role|get_key:object|title }}
                                    </span>
                                    <p class="card-text">
                                        {{ object.description }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endblock %}
    </div>
{% endblock %}