{% extends "base.html" %}
{% load ephios_crispy %}
{% load utils %}
{% load user_extras %}
{% load static %}
{% load i18n %}

{% block title %}
    {% translate "Users" %}
{% endblock %}

{% block content %}
    <div class="page-header">
        <h1>
            {% translate "Users" %}
        </h1>
    </div>

    <form method="GET" id="filter-form" class="row align-items-center">
        <div class="col-12 col-lg">
            <div class="row align-items-center">
                {% crispy_field filter_form.query wrapper_class="col-12 col-lg" show_labels=False %}
                {% crispy_field filter_form.group wrapper_class="col-12 col-lg" show_labels=False %}
                {% crispy_field filter_form.qualification wrapper_class="col-12 col-lg" show_labels=False %}
            </div>
        </div>
        <div class="col-12 col-lg-auto mb-3">
            <button type="submit" class="btn btn-primary">
                <span class="fa fa-funnel"></span> {% translate "Apply" %}
            </button>
            <a class="btn btn-secondary" href="?">{% translate "Reset" %}</a>
        </div>

        <div class="col-12 mb-3">
            {% if perms.core.add_userprofile and show_local_user_management %}
                <a class="btn btn-sm btn-secondary" href="{% url "core:userprofile_create" %}"><span
                    class="fa fa-plus"></span> {% translate "Add user" %}</a>
            {% endif %}
            {% if mass_notification_tos %}
                <a class="btn btn-sm btn-secondary"
                   href="{% url "core:notification_mass" %}?{{ mass_notification_tos }}">
                    <span class="fa fa-envelope"></span>
                    {% blocktranslate trimmed count counter=page_obj.paginator.count %}
                        Send message to this {{ counter }} account
                    {% plural %}
                        Send message to these {{ counter }} accounts
                    {% endblocktranslate %}
                </a>
            {% endif %}
        </div>
    </form>

    <ul class="list-group mb-3">
        {% for userprofile in userprofile_list %}
            <li class="list-group-item">
                <div class="row mb-0">
                    <div class="col-12 col-lg-5">
                        <div class="row">
                            <div class="col col-lg-6 col-xxl-8">
                                <h5 class="mb-0 d-inline">
                                    {{ userprofile.get_full_name }}
                                </h5>
                                <br/>
                                <a class="link-dark link-underline-opacity-0 link-opacity-50 link-underline-opacity-50-hover link-opacity-100-hover"
                                   href="mailto:{{ userprofile.email }}">{{ userprofile.email }}</a>
                            </div>
                            <div class="col-auto col-lg-6 col-xxl-4">
                                {% if userprofile.is_minor %}
                                    <span class="badge bg-warning">{% translate "minor" %}</span>
                                {% endif %}
                                {% if userprofile|not_seen_recently %}
                                    {% with userprofile.last_login|timesince as timeframe %}
                                        <span class="badge bg-warning" data-bs-toggle="tooltip" data-bs-placement="top"
                                              title="
                                                     {% if timeframe %}
                                                         {% blocktranslate trimmed %}Last login: {{ timeframe }} ago{% endblocktranslate %}
                                                     {% else %}
                                                         {% translate "Last login: never" %}
                                                     {% endif %}">
                                            {% translate "not seen recently" %}
                                        </span>
                                    {% endwith %}
                                {% endif %}
                                {% if not userprofile.is_active %}
                                    <span class="badge bg-danger">{% translate "inactive" %}</span>
                                {% elif userprofile.is_staff %}
                                    <span class="badge bg-info">{% translate "admin" %}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-8 col-lg">
                        <div>
                            {% if userprofile.groups.all %}
                                <span class="fas fa-users"></span>
                                {{ userprofile.groups.all|join:", " }}
                            {% else %}
                                <span class="fas fa-users-slash" title="{% translate "no groups" %}"></span>
                            {% endif %}
                        </div>
                        <div class="text-body-secondary">
                            {% for abbreviation in userprofile.qualification_grants.all|grants_to_essential_abbreviations %}
                                <span class='badge bg-secondary text-dark'>{{ abbreviation }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-4 col-lg-auto d-flex align-items-end align-items-lg-center justify-content-end">
                        <a class="btn btn-secondary btn-sm text-nowrap"
                           href="{% url "core:workinghours_detail" userprofile.pk %}"><span
                            class="fa fa-list-ol"></span> <span
                                class="d-none d-lg-inline">{% translate "Working hours" %}</span></a>
                        <a class="btn btn-secondary btn-sm text-nowrap ms-1"
                           href="{% url "core:userprofile_edit" userprofile.pk %}"><span
                            class="fa fa-edit"></span> <span
                                class="d-none d-md-inline">{% translate "Edit" %}</span></a>
                        {% if perms.core.delete_userprofile %}
                            <a class="btn btn-secondary btn-sm text-nowrap ms-1"
                               href="{% url "core:userprofile_delete" userprofile.pk %}"><span
                                class="fa fa-trash-alt"></span> <span
                                    class="d-none d-lg-inline">{% translate "Delete" %}</span></a>
                        {% endif %}
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>

    {% include 'core/pagination.html' %}
{% endblock %}