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

{% block title %}{{ type.plural }} buchen · ephub{% endblock %}

{% block content %}
    {# The dashboard is the only navigation there is, so every board says how to get back. #}
    <a class="text-sm text-gray-500 hover:text-gray-900" href="{{ path('app_dashboard') }}">← Übersicht</a>

    <h1 class="pt-2">{{ type.plural }} buchen</h1>
    <p class="subline">Tag und Zeitraum wählen, dann einen freien Platz anklicken.</p>

    <div class="mt-8 grid gap-8 xl:grid-cols-3">
        <div class="xl:col-span-1">
            {#
                The two blocks below are what BoardController::day and BookingController swap out
                of band. Each one owns a stable id and emits hx-swap-oob only when rendered
                through htmxOobResponse -- rendered normally they are plain markup.
            #}
            {% block calendar %}
                <div id="board-calendar"{% if htmx_oob_swap is defined and htmx_oob_swap %} hx-swap-oob="true"{% endif %}>
                    {% include 'board/_calendar.html.twig' %}
                </div>
            {% endblock %}
        </div>

        <div class="xl:col-span-2">
            {% block floorplan %}
                <div id="board-floorplan"{% if htmx_oob_swap is defined and htmx_oob_swap %} hx-swap-oob="true"{% endif %}>
                    {% include 'board/_floorplan.html.twig' %}
                </div>
            {% endblock %}
        </div>
    </div>
{% endblock %}