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

{#
    The shell. Deliberately has no navigation: the dashboard at / is how you get anywhere, so the
    only things up here are the way back to it and the way out. A booking board reached from a
    tile links back with its own breadcrumb.
#}
{% block body %}
    <div class="border-b border-gray-200">
        <div class="max-w-screen-2xl mx-auto px-4 lg:px-8 h-16 flex items-center justify-between gap-4">
            <a href="{{ path('app_dashboard') }}" class="shrink-0">
                <img class="h-8 w-auto" src="{{ asset('images/logo_ep.svg') }}" alt="ephub">
            </a>

            {% if app.user %}
                <div class="flex items-center gap-4">
                    <span class="hidden sm:block text-sm text-gray-500">{{ app.user.name }}</span>
                    <a href="{{ path('app_logout') }}"
                       class="flex items-center gap-2 text-sm font-semibold text-gray-700 hover:text-gray-900">
                        {{ ux_icon('lucide:log-out', { class: 'h-5 w-5 shrink-0 text-gray-400' }) }}
                        <span class="hidden sm:inline">Abmelden</span>
                    </a>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="max-w-screen-2xl mx-auto px-4 lg:px-8 py-8">
        {% block content %}{% endblock %}
    </div>

    {# Swapped out of band after a booking, hence the stable id and the conditional attribute. #}
    {% block flashes %}
        <div id="flashes" class="fixed bottom-4 right-4 z-50 space-y-2"
             {%- if htmx_oob_swap is defined and htmx_oob_swap %} hx-swap-oob="true"{% endif %}>
            {% include '_partials/_flashes.html.twig' %}
        </div>
    {% endblock %}
{% endblock %}