{% extends 'swimmonitor/base.html.twig' %}

{% block title %}Benutzer{% endblock %}

{% block breadcrumb %}<li>Administration</li><li>Benutzer</li>{% endblock %}

{% set role_labels = {
    ROLE_DEVELOPER: ['Developer', 'sm-tag--info'],
    ROLE_SUPERADMIN: ['Superadmin', 'sm-tag--alarm'],
    ROLE_ADMIN: ['Admin', 'sm-tag--warn'],
    ROLE_SIGNAGE_ADMIN: ['Signage-Admin', ''],
    ROLE_SIGNAGE_EDITOR: ['Signage-Editor', ''],
    ROLE_SIGNAGE_VIEWER: ['Signage-Ansicht', ''],
    ROLE_BOOKING_ADMIN: ['Buchungs-Admin', ''],
    ROLE_USER: ['Benutzer', '']
} %}

{% block page_head %}
    <div>
        <h1>Benutzer</h1>
        <p class="sm-lead">Zugänge zum SwimMonitor und ihre Rollen.</p>
    </div>
    <div class="sm-page-actions">
        <dl class="sm-summary me-3"><div><dt>Benutzer</dt><dd>{{ users|length }}</dd></div></dl>
        <a href="{{ path('admin_user_register') }}" class="btn btn-primary">Neuer Benutzer</a>
    </div>
{% endblock %}

{% block content %}
    <div class="sm-toolbar">
        <input class="sm-search" type="search" placeholder="Name oder E-Mail suchen …" aria-label="Benutzer suchen" data-sm-search="#user-list">
    </div>

    <section class="sm-panel">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>E-Mail</th>
                        <th>Rollen</th>
                        <th>Erstellt</th>
                        <th class="sm-actions"><span class="visually-hidden">Aktionen</span></th>
                    </tr>
                </thead>
                <tbody id="user-list">
                    {% for user in users %}
                        <tr data-sm-item data-sm-text="{{ user.firstName }} {{ user.lastName }} {{ user.email }}">
                            <td>
                                <span class="sm-user-cell">
                                    <span class="sm-initials sm-initials--light">
                                        {%- if user.avatar -%}
                                            <img src="{{ path('avatar_serve', {filename: user.avatar}) }}" alt="">
                                        {%- else -%}
                                            {{ (user.firstName|first ~ user.lastName|first)|upper }}
                                        {%- endif -%}
                                    </span>
                                    {{ user.firstName }} {{ user.lastName }}
                                </span>
                            </td>
                            <td class="sm-mono">{{ user.email }}</td>
                            <td>
                                <span class="sm-tag-list">
                                    {% for role in user.roles %}
                                        {% set r = role_labels[role]|default([role|replace({'ROLE_': ''})|lower, '']) %}
                                        <span class="sm-tag {{ r[1] }}">{{ r[0] }}</span>
                                    {% endfor %}
                                </span>
                            </td>
                            <td class="sm-mono">{{ user.createdAt and user.createdAt|date('Y') > 1970 ? user.createdAt|date('d.m.Y H:i') : '–' }}</td>
                            <td class="sm-actions">
                                <a href="{{ path('admin_user_edit', {id: user.id}) }}" class="btn btn-sm btn-secondary">Bearbeiten</a>
                                <form action="{{ path('admin_user_delete', {id: user.id}) }}" method="post" class="d-inline"
                                      data-sm-confirm="Benutzer „{{ user.firstName }} {{ user.lastName }}“ wirklich löschen?">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.id) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-danger" aria-label="{{ user.firstName }} {{ user.lastName }} löschen"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="5"><div class="sm-empty"><strong>Keine Benutzer</strong>Mit „Neuer Benutzer“ einen Zugang anlegen.</div></td></tr>
                    {% endfor %}
                    <tr data-sm-empty hidden><td colspan="5"><div class="sm-empty"><strong>Keine Treffer</strong>Suchbegriff ändern.</div></td></tr>
                </tbody>
            </table>
        </div>
    </section>
{% endblock %}