{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% block content %}
    <div class="table-header">
        <h1 class="heading">{% trans "Account Management" %}</h1>
        <div class="flex justify-between gap-4">
            {% include "_search_input.html" with object_type="user" related_form="user-filter-form" search_query=filter_form.cleaned_data.query %}
            <div class="flex flex-wrap gap-4">
                <button id="filter-toggle" class="btn btn-light-blue">
                    <span class="filter-toggle-text {% if filter_form.filters_visible %}hidden{% endif %}">{% trans "Show filters" %}</span>
                    <span class="filter-toggle-text {% if not filter_form.filters_visible %}hidden{% endif %}">{% trans "Hide filters" %}</span>
                </button>
                {% if perms.cms.change_user %}
                    <a href="{% url 'new_user' %}" class="btn">{% trans "Create account" %}</a>
                {% endif %}
            </div>
        </div>
    </div>
    <div id="filter-form-container"
         class="{% if not filter_form.filters_visible %}hidden{% endif %} w-full mt-4 rounded border border-solid border-gray-200 shadow bg-white">
        {% include "users/_user_filter_form.html" %}
    </div>
    <div class="table-listing">
        <table class="w-full mt-4 rounded border border-solid border-gray-200 shadow bg-white">
            <thead>
                <tr class="border-b border-solid border-gray-200">
                    <th class="text-sm text-left uppercase py-3 pl-4 pr-2">{% trans "Username" %}</th>
                    <th class="text-sm text-left uppercase py-3 pr-2">{% trans "First Name" %}</th>
                    <th class="text-sm text-left uppercase py-3 pr-2">{% trans "Last Name" %}</th>
                    <th class="text-sm text-left uppercase py-3 pr-2">{% trans "E-mail-address" %}</th>
                    <th class="text-sm text-left uppercase py-3 pr-2">{% trans "Region" %}</th>
                    <th class="text-sm text-left uppercase py-3 pr-2">{% trans "Role" %}</th>
                    <th class="text-sm text-left uppercase py-3 pr-2">{% trans "Last Login" %}</th>
                    <th class="text-sm text-left uppercase py-3 pr-2 min">{% trans "Active" %}</th>
                    <th class="text-sm text-left uppercase py-3 pr-2 min">
                        {% trans "Team member" %}
                        <span class="inline-block h-4 w-4 align-text-top bg-integreat-icon bg-contain bg-center bg-no-repeat"></span>
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-4 min">{% trans "Administrator" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                    {% include "users/user_list_row.html" %}
                {% empty %}
                    <tr>
                        <td colspan="6" class="px-2 py-3">
                            {% if filter_form.is_enabled %}
                                {% trans "No users found with these filters." %}
                            {% else %}
                                {% trans "No users available yet." %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% url "users" as url %}
    {% include "pagination.html" with chunk=users %}
{% endblock content %}