{#
    The frame around a plan: heading, legend, span picker. The drawing itself lives in
    board/plan/_<type>.html.twig and is included by convention, so a new ResourceType needs a new
    partial there and nothing else.

    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 %}
        {% include 'board/plan/_' ~ type.value ~ '.html.twig' %}
    {% endif %}
</div>