{#
    Maintaining the codes: every row there is, in a table, newest per door first.

    The counterpart of access_code/index.html.twig, which shows one card per door with the code
    that works today and nothing else. Everything the quick look leaves out is here -- rows the
    controller marked `upcoming` or `superseded`, muted and labelled -- because this is the
    screen on which a rotation is planned and checked.

    „Für wen" is the visibility itself: it decides who is served the row and says so in the same
    breath, so there is nothing to keep in step between the two.
#}
{% extends 'layout.html.twig' %}

{% block title %}Zugangscodes verwalten · E&P Platz{% endblock %}

{% block content %}
    <a class="text-sm text-gray-500 hover:text-gray-900" href="{{ path('app_access_code') }}">← Zugangscodes</a>

    <div class="flex flex-wrap items-baseline justify-between gap-2 pt-2">
        <div>
            <h1>Zugangscodes verwalten</h1>
        </div>
        <div class="flex flex-wrap gap-2">
            <button type="button" class="button button--small button--neutral"
                    hx-get="{{ path('app_admin_access_code_notify') }}"
                    hx-target="body"
                    hx-swap="beforeend">Mitarbeitende benachrichtigen</button>
            <button type="button" class="button button--small button--primary"
                    hx-get="{{ path('app_admin_access_code_new') }}"
                    hx-target="body"
                    hx-swap="beforeend">Code hinzufügen</button>
        </div>
    </div>

    {% if rows is empty %}
        <p class="pt-8 text-sm text-gray-500">Noch nichts hinterlegt.</p>
    {% else %}
        <div class="pt-8 overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="border-b border-gray-200 text-gray-500">
                    <tr>
                        <th class="py-2 pr-4 font-semibold">Bezeichnung</th>
                        <th class="py-2 pr-4 font-semibold">Beschreibung</th>
                        <th class="py-2 pr-4 font-semibold">Code</th>
                        <th class="py-2 pr-4 font-semibold">sichtbar für</th>
                        <th class="py-2 pr-4 font-semibold">gültig ab</th>
                        <th class="py-2 font-semibold"><span class="sr-only">Aktionen</span></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for row in rows %}
                        {% set muted = row.upcoming or row.superseded %}
                        <tr data-access-code class="{{ muted ? 'text-gray-400' : '' }}">
                            <td class="py-2 pr-4 font-semibold">{{ row.code.label }}</td>
                            <td class="py-2 pr-4">{{ row.code.description }}</td>
                            <td class="py-2 pr-4 font-mono">{{ row.code.code }}</td>
                            <td class="py-2 pr-4">
                                {% if row.code.visibility.isRestricted %}
                                    <span class="badge bg-gray-100 text-gray-600">{{ row.code.visibility.label }}</span>
                                {% else %}
                                    {{ row.code.visibility.label }}
                                {% endif %}
                            </td>
                            <td class="py-2 pr-4 whitespace-nowrap">
                                {{ row.code.validFrom|format_date(pattern: 'd.MM.y') }}
                                {% if row.upcoming %}
                                    <span class="badge bg-amber-100 text-amber-800 ml-1">noch nicht gültig</span>
                                {% elseif row.superseded %}
                                    <span class="badge bg-gray-100 text-gray-600 ml-1">ersetzt</span>
                                {% endif %}
                            </td>
                            <td class="py-2">
                                <div class="flex justify-end gap-2">
                                    <button type="button" class="button button--small button--neutral"
                                            hx-get="{{ path('app_admin_access_code_edit', { id: row.code.id }) }}"
                                            hx-target="body" hx-swap="beforeend">Bearbeiten</button>
                                    <button type="button" class="button button--small button--neutral"
                                            hx-get="{{ path('app_admin_access_code_delete', { id: row.code.id }) }}"
                                            hx-target="body" hx-swap="beforeend">Löschen</button>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}