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

{% block title %}Übersicht · ephub{% 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 }}</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 Termine und Serien verwalten.</p>
        </a>
    </div>

    <h2 class="pt-10">Als Nächstes</h2>

    {% if upcoming is empty %}
        <p class="text-sm text-gray-500">Nichts gebucht.</p>
    {% else %}
        <ul class="divide-y divide-gray-200 border-y border-gray-200">
            {% for booking in upcoming %}
                <li class="flex items-center justify-between gap-4 py-3">
                    <div>
                        <div class="font-semibold">
                            {{ booking.date|format_datetime(pattern: 'EEEE, d. MMMM') }}
                            <span class="font-normal text-gray-500">· {{ booking.timeRange }}</span>
                        </div>
                        <div class="text-sm text-gray-500">
                            {{ booking.resource.type.label }} · {{ booking.resource.label }}
                            {% if booking.partOfSeries %}
                                <span class="badge bg-gray-100 text-gray-600 ml-1">Serie</span>
                            {% endif %}
                        </div>
                    </div>
                    <a class="text-sm underline shrink-0"
                       href="{{ path('app_board', { type: booking.resource.type.value, date: booking.date|date('Y-m-d') }) }}">
                        Im Plan
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}