{#
    The quick look: what to type at a door, on the phone you are holding in front of it.

    One card per door with the code in force today and nothing else -- no dates, no history, no
    buttons. Maintaining the codes is admin/access_codes.html.twig, which is the table this page
    used to be.

    The card is sized for reading, not for fitting: the code is the largest thing on the screen,
    in near-black on white and in a tabular font so 1 and 7 cannot be confused. One column on a
    phone, more when there is room.
#}
{% extends 'layout.html.twig' %}

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

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

    <div class="flex flex-wrap items-baseline justify-between gap-2 pt-2">
        <div>
            <h1>Zugangscodes</h1>
            <p class="subline">Türen, Aufzug etc.</p>
        </div>
        {% if is_granted('ROLE_ADMIN') %}
            <a class="button button--small button--neutral" href="{{ path('app_admin_access_code') }}">Codes verwalten</a>
        {% endif %}
    </div>

    {% if codes is empty %}
        <p class="pt-8 text-sm text-gray-500">Zurzeit gilt kein Code.</p>
    {% else %}
        <div class="pt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {% for code in codes %}
                <div class="flex flex-col rounded-md border border-gray-200 p-6" data-access-code>
                    <div class="flex items-baseline justify-between gap-2">
                        <span class="text-lg font-bold">{{ code.label }}</span>
                        {% if code.visibility.isRestricted %}
                            <span class="badge bg-gray-100 text-gray-600 shrink-0">{{ code.visibility.label }}</span>
                        {% endif %}
                    </div>

                    {% if code.description %}
                        <p class="pt-1 text-sm text-gray-500">{{ code.description }}</p>
                    {% endif %}

                    {# mt-auto, so the code sits at the bottom of the card and the codes of a row
                       line up whether or not a door has a description -- grid stretches the cards
                       of a row to the same height, and this spends the difference above the code
                       rather than below it. Same device as the dashboard tiles.

                       tracking-widest so a long code stays readable as digits rather than as a
                       number, and break-all so it never overflows a narrow screen. #}
                    <p class="mt-auto pt-4 font-mono text-4xl font-bold tracking-widest tabular-nums break-all text-gray-900"
                       data-code>{{ code.code }}</p>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}