feat: door access codes display and admin crud

templates/access_code/index.html.twig

@@ -0,0 +1,59 @@
+{#
+    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 %}