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

{% block title %}Übersicht · ephub{% endblock %}

{% block content %}
    <h1>Buchen</h1>
    <p class="subline">Tag und Zeitraum wählen, dann einen freien Platz im Raumplan 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 DashboardController::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 'dashboard/_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 'dashboard/_floorplan.html.twig' %}
                </div>
            {% endblock %}
        </div>
    </div>
{% endblock %}