{% extends "@FerienpassAdmin/layout/slideOverBase.html.twig" %}

{% trans_default_domain 'admin' %}
{% set translationPrefix = app.request.get('_route')|split('_')[1] %}
{% set title = headline|default(item.name|default("#{translationPrefix}.new")) %}

{% block main %}

        {% block edit_page_header %}
            <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-6 sm:px-6 @md:bg-transparent @md:dark:bg-transparent @md:px-0 @md:py-0">
                <div class="@md:flex @md:items-center @md:justify-between">
                    <div class="min-w-0 flex-1">
                        {% block edit_page_header_headline %}
                            <h1 class="text-base font-semibold text-gray-900 dark:text-white @md:tracking-tight @md:text-3xl @md:font-extrabold @md:dark:text-gray-50">{{ headline|default(item.name|default("#{translationPrefix}.new"))|trans }}</h1>
                        {% endblock %}
                    </div>
                    <div class="mt-4 flex shrink-0 @md:mt-0 @md:ml-4">
                        {% block edit_page_header_actions %}{% endblock %}
                    </div>
                </div>

                <div class="mt-1">
                    <div class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 text-sm">

                        {% block edit_page_header_info %}
                        {% endblock %}

                    </div>
                </div>
            </div>

        {% endblock edit_page_header %}

    <div class="mt-6 flex flex-1 lg:gap-x-12">

        <nav class="-ml-2 px-2 py-1.5 flex flex-shrink-0 w-72 flex-col" aria-label="Sidebar">
            {% block edit_aside_nav %}
                <ul role="list" class="-mx-2 space-y-1">
                    {% for v in formScreen.sections %}

                        <li>
                            <a href="{{ item.id or v == section ? path(app.current_route, app.current_route_parameters|merge({ section: v })) : '#' }}"
                               class="{{ section == v ? 'bg-gray-100 dark:bg-gray-900' : 'hover:bg-gray-100 dark:hover:bg-gray-900' }}
                               {{ not item.id and v != section ? 'cursor-not-allowed opacity-50' : '' }}
                                        group text-gray-700 dark:text-gray-300 flex items-center gap-x-2.5 rounded-md p-2 text-sm/6 font-semibold">

                                {% block edit_aside_nav_label %}
                                    <span>{{ formScreen.sectionLabel(v)|trans }}</span>
                                {% endblock %}

                            </a>
                        </li>
                    {% endfor %}
                </ul>
            {% endblock edit_aside_nav %}
        </nav>

        <div class="flex-1 xl:overflow-y-auto pb-24">
            <div class="px-4 sm:px-6 lg:px-0">

                {% block edit_header %}

                    <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-200">{{ formScreen.sectionLabel(section)|trans }}</h2>
                    {% if formScreen.sectionDescription(section)|trans != formScreen.sectionDescription(section) %}
                        <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-300">{{ formScreen.sectionDescription(section)|trans }}</p>
                    {% endif %}

                {% endblock %}

                {% block edit_form %}

                    {% include '@FerienpassAdmin/layout/_edit.html.twig' %}

                {% endblock %}

            </div>
        </div>
    </div>

{% endblock %}


{% block unsaved_changes_stream %}
    <twig:Turbo:Stream:Update target="#modal">
        <div>
            <div class="mx-auto flex size-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-500/10">
                <twig:ux:icon name="ph:warning" aria-hidden="true" class="size-6 text-red-600 dark:text-red-400" />
            </div>
            <div class="mt-3 text-center sm:mt-5">
                <h3 id="dialog-title" class="text-base font-semibold text-gray-900 dark:text-white">Ungespeicherte Änderungen</h3>
                <div class="mt-2">
                    <p class="text-sm text-gray-500 dark:text-gray-400">Sie haben Ihre Änderungen nicht gespeichert. Wollen Sie wirklich fortfahren, ohne zu speichern?</p>
                </div>
            </div>
        </div>
        <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
            <twig:Admin:Button variant="destructive" data-action="click->ferienpass--admin-modal#dispatch" data-ferienpass--admin-modal-event-param="ferienpass-edit:continue" class="w-full justify-center sm:col-start-2">Nicht speichern und weiter</twig:Admin:Button>
            <twig:Admin:Button data-action="click->ferienpass--admin-modal#dispatch" data-ferienpass--admin-modal-event-param="ferienpass-edit:close" command="close" commandfor="admin-modal-dialog" class="w-full justify-center sm:col-start-1 sm:mt-0">Zurück zur Eingabemaske</twig:Admin:Button>
        </div>
    </twig:Turbo:Stream:Update>
{% endblock %}
