{% extends 'base.adm.html.twig' %}

{% block title %}Benutzerverwaltung{% endblock %}

{% block body %}
    <div class="container-fluid adm-page adm-page--fluid">
        <div class="adm-page__header">
            <h1>Benutzerverwaltung</h1>
            <p>Benutzer aktivieren/deaktivieren, bearbeiten oder löschen</p>
        </div>

        <div class="adm-table-wrap">
            <div class="d-flex align-items-center gap-3 mb-3 flex-wrap">
                <div class="form-check form-switch m-0">
                    <input class="form-check-input" type="checkbox" role="switch"
                           id="admUsersActiveFilter" checked>
                    <label class="form-check-label" for="admUsersActiveFilter" id="admUsersActiveFilterLabel">
                        Aktive Benutzer
                    </label>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <label class="form-label m-0" for="admUsersRoleFilter">{{ 'lang.role'|trans }}</label>
                    <select class="form-select form-select-sm" id="admUsersRoleFilter" style="min-width: 12rem;">
                        <option value="">Alle</option>
                        {% for role in roles %}
                            <option value="{{ role }}">{{ role }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered w-100" id="admUsersTable"
                       data-url="{{ path('app_adm_users_data') }}"
                       data-toggle-url-template="{{ path('app_adm_users_toggle_active', {id: '__ID__'}) }}"
                       data-label-yes="{{ 'lang.yes'|trans }}"
                       data-label-no="{{ 'lang.no'|trans }}"
                       data-label-edit="{{ 'lang.edit'|trans }}"
                       data-label-password="{{ 'lang.changePassword'|trans }}"
                       data-label-delete="{{ 'lang.delete'|trans }}"
                       data-label-save="{{ 'lang.save'|trans }}"
                       data-label-cancel="{{ 'lang.cancel'|trans }}"
                       data-confirm-delete="{{ 'lang.areYouSure'|trans }}">
                    <thead>
                    <tr>
                        <th>{{ 'lang.email'|trans }}</th>
                        <th>{{ 'lang.role'|trans }}</th>
                        <th>{{ 'lang.firstName'|trans }}</th>
                        <th>{{ 'lang.lastName'|trans }}</th>
                        <th>{{ 'lang.cellphone'|trans }}</th>
                        <th>{{ 'lang.company'|trans }}</th>
                        <th>{{ 'lang.mainAccount'|trans }}</th>
                        <th>{{ 'lang.verified'|trans }}</th>
                        <th>{{ 'lang.isUser'|trans }}</th>
                        <th>{{ 'lang.validUntil'|trans }}</th>
                        <th>{{ 'lang.active'|trans }}</th>
                        <th>{{ 'lang.changePassword'|trans }}</th>
                        <th>{{ 'lang.edit'|trans }}</th>
                        <th>{{ 'lang.delete'|trans }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end adm-user-offcanvas" tabindex="-1" id="admUserEditOffcanvas"
         aria-labelledby="admUserEditOffcanvasLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="admUserEditOffcanvasLabel">{{ 'lang.updateUser'|trans }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body" id="admUserEditOffcanvasBody">
            <div class="text-muted">…</div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end adm-user-offcanvas" tabindex="-1" id="admUserPasswordOffcanvas"
         aria-labelledby="admUserPasswordOffcanvasLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="admUserPasswordOffcanvasLabel">{{ 'lang.changePassword'|trans }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body" id="admUserPasswordOffcanvasBody">
            <div class="text-muted">…</div>
        </div>
    </div>
{% endblock %}

{% block styles %}
    {{ parent() }}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('adm_users') }}
{% endblock %}