{#
    The plan: heading, legend, span picker, then one section per room with a card per spot.
    Every ResourceType renders the same way, so a new one needs no template of its own.

    Colouring needs no JavaScript at all: the plan is re-rendered server side for the selected day
    and span, so free/taken/yours is decided in Twig. Note "free" is always relative to the span
    in the header -- a desk booked 09:00-13:00 is free for an afternoon board and taken for an
    all-day one.
#}
<div class="rounded-md border border-gray-200 p-4">
    <div class="flex flex-wrap items-baseline justify-between gap-2 pb-2">
        <h2 class="!pb-0">{{ selected_date|format_datetime(pattern: 'EEEE, d. MMMM y') }}</h2>
        <div class="flex items-center gap-4 text-xs text-gray-500">
            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm bg-emerald-50 border-2 border-emerald-500"></span> frei</span>
            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm bg-amber-50 border-2 border-amber-500"></span> teilweise frei</span>
            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm bg-gray-200 border-2 border-gray-400"></span> belegt</span>
            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm bg-primary border-2 border-primary-dark"></span> deine</span>
        </div>
    </div>

    {% include 'board/_timerange.html.twig' %}

    {% if is_past %}
        <p class="pb-4 text-sm text-amber-700">Vergangener Tag — hier lässt sich nichts mehr buchen.</p>
    {% endif %}

    {% if resources is empty %}
        <p class="py-8 text-center text-sm text-gray-500">Für diesen Bereich ist noch nichts eingerichtet.</p>
    {% else %}
        {% import 'board/_spot.html.twig' as plan %}
        {% set time_params = selected_time.allDay ? {} : { from: selected_time.start, to: selected_time.end } %}

        <div class="space-y-6">
            {#
                Rooms in their configured order, then anything without one. Ungrouped spots get no
                heading: a kind of resource that is not split across rooms (the car park) has
                nothing to say there that the page heading has not already said.
            #}
            {% for spot_group in spot_groups %}
                <section>
                    {% if spot_group.group %}
                        {% set free = spot_group.freeCount %}
                        {# Prominent on purpose: desk labels repeat from room to room, so the room is
                           the only thing telling one "Schreibtisch 1" from the next. #}
                        <h3 class="!mb-0 pb-2 text-base font-semibold text-gray-900 md:text-lg">
                            {{- spot_group.group.label -}}
                            {%- if free > 0 %} <span class="text-sm font-normal text-emerald-600">· {{ free }} frei</span>
                            {%- else %} <span class="text-sm font-normal text-gray-500">· belegt</span>{% endif -%}
                        </h3>
                    {% endif %}

                    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
                        {% for spot in spot_group.spots %}
                            {{ plan.spot(spot, selected_date, is_past, time_params) }}
                        {% endfor %}
                    </div>
                </section>
            {% endfor %}
        </div>
    {% endif %}
</div>