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

{% block body %}
    <div class="max-w-screen-2xl mx-auto px-4 lg:px-8 lg:grid lg:grid-cols-4 gap-8 py-8">
        <div class="lg:col-span-4 flex items-center justify-between pb-4 lg:pb-0">
            <a href="{{ path('app_dashboard') }}">
                <img class="h-8 w-auto" src="{{ asset('images/logo_ep.svg') }}" alt="ephub">
            </a>
            <button type="button"
                    class="lg:hidden"
                    {{ stimulus_controller('mobilenav', [], [], { 'mobilenav': '#mobilenav' }) }}
                    {{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'open' }) }}>
                {{ ux_icon('lucide:menu', { class: 'w-8 h-8 text-gray-700' }) }}
            </button>
        </div>

        <div class="hidden lg:block sticky top-0 h-screen">
            {% include '_partials/_nav.html.twig' %}
        </div>

        <div class="lg:col-span-3">
            {% block content %}{% endblock %}
        </div>
    </div>

    <div id="mobilenav"
         class="fixed z-50 top-0 left-0 inset-0 pr-16 bg-black/70 -translate-x-full"
         {{ stimulus_controller('mobilenav', [], { 'closed': '-translate-x-full' }, { 'mobilenav': '#mobilenav' }) }}>
        <div class="h-screen w-full bg-white">
            <div class="flex justify-between p-8">
                <img class="h-8 w-auto" src="{{ asset('images/logo_ep.svg') }}" alt="">
                <button type="button" {{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'close' }) }}>
                    {{ ux_icon('lucide:x', { class: 'w-8 h-8' }) }}
                </button>
            </div>
            <div class="w-full h-full p-8 pt-0 overflow-y-scroll">
                {% include '_partials/_nav.html.twig' %}
            </div>
        </div>
    </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 %}