{% extends "_base.html" %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="table-header">
    <h1 class="heading">{% trans 'User 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 user' %}</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 %}
