{% extends 'layout.html.twig' %}

{% block title %}Übersicht · E&P Platz{% endblock %}

{% block content %}
    <h1>Übersicht</h1>
    <p class="subline">{{ today|format_datetime(pattern: 'EEEE, d. MMMM y') }}</p>

    {#
        One tile per ResourceType, generated rather than written out. A new bookable kind appears
        here -- with a working link and a correct count -- by adding a case to the enum.
    #}
    <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {% for tile in tiles %}
            <a href="{{ path('app_board', { type: tile.type.value }) }}"
               class="group flex flex-col rounded-md border border-gray-200 p-6 hover:border-primary hover:bg-gray-50">
                <div class="flex items-center gap-3 pb-2">
                    {{ ux_icon(tile.type.icon, { class: 'h-6 w-6 shrink-0 text-primary' }) }}
                    <span class="text-lg font-bold">{{ tile.type.plural }}</span>
                </div>

                <p class="text-sm text-gray-500 pb-4">{{ tile.type.description }}</p>

                <div class="mt-auto flex items-baseline justify-between">
                    <span class="text-sm">
                        {% if tile.total == 0 %}
                            <span class="text-gray-400">nichts eingerichtet</span>
                        {% elseif tile.free == 0 %}
                            <span class="font-semibold text-red-600">heute alles belegt</span>
                        {% else %}
                            <span class="font-semibold text-emerald-700">{{ tile.free }}</span>
                            <span class="text-gray-500">von {{ tile.total }} heute frei</span>
                        {% endif %}
                    </span>
                    {% if tile.mine %}
                        <span class="badge bg-primary text-white">{{ tile.mine.resource.label }}
                            {%- if tile.mine.resource.group %} · {{ tile.mine.resource.group.label }}{% endif %}</span>
                    {% endif %}
                </div>
            </a>
        {% endfor %}

        <a href="{{ path('app_booking') }}"
           class="group flex flex-col rounded-md border border-gray-200 p-6 hover:border-primary hover:bg-gray-50">
            <div class="flex items-center gap-3 pb-2">
                {{ ux_icon('lucide:calendar-days', { class: 'h-6 w-6 shrink-0 text-primary' }) }}
                <span class="text-lg font-bold">Meine Buchungen</span>
            </div>
            <p class="text-sm text-gray-500 pb-4">Alle Buchungen verwalten.</p>
        </a>

        <a href="{{ path('app_access_code') }}"
           class="group flex flex-col rounded-md border border-gray-200 p-6 hover:border-primary hover:bg-gray-50">
            <div class="flex items-center gap-3 pb-2">
                {{ ux_icon('lucide:key-round', { class: 'h-6 w-6 shrink-0 text-primary' }) }}
                <span class="text-lg font-bold">Zugangscodes</span>
            </div>
            <p class="text-sm text-gray-500 pb-4">Codes für Türen, Aufzug und Schranke.</p>
        </a>

        {#
            The header is deliberately not navigation, so the dashboard is the only place an
            admin screen can be reached from.
        #}
        {% if is_granted('ROLE_ADMIN') %}
            <a href="{{ path('app_admin_booking') }}"
               class="group flex flex-col rounded-md border border-gray-200 p-6 hover:border-primary hover:bg-gray-50">
                <div class="flex items-center gap-3 pb-2">
                    {{ ux_icon('lucide:shield-check', { class: 'h-6 w-6 shrink-0 text-primary' }) }}
                    <span class="text-lg font-bold">Verwaltung</span>
                </div>
                <p class="text-sm text-gray-500 pb-4">
                    Buchungen aller Mitarbeitenden einsehen und ggf. freigeben.
                </p>
            </a>

            <a href="{{ path('app_admin_resource') }}"
               class="group flex flex-col rounded-md border border-gray-200 p-6 hover:border-primary hover:bg-gray-50">
                <div class="flex items-center gap-3 pb-2">
                    {{ ux_icon('lucide:layout-grid', { class: 'h-6 w-6 shrink-0 text-primary' }) }}
                    <span class="text-lg font-bold">Ressourcen</span>
                </div>
                <p class="text-sm text-gray-500 pb-4">
                    Buchbare Ressourcen und ihre Standorte verwalten.
                </p>
            </a>
        {% endif %}
    </div>
{% endblock %}