<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:dark:divide-gray-800 lg:px-8">
    <div class="relative flex justify-between">
        <div class="relative z-10 px-2 py-3 flex lg:px-0">
            <div class="flex-shrink-0">
                {% block logo %}
                    {% if brand_logo() %}
                        <div class="h-full flex items-center py-2">
                            <img class="block h-12 w-auto" src="{{ brand_logo() }}"
                                 alt="{{ page_config().pageTitle|default('Ferienpass') }}"/>
                        </div>
                    {% else %}
                        <div class="h-full flex items-center">
                            <h1 class="text-sm text-gray-500 font-normal leading-4">{{ page_config().pageTitle|default('Ferienpass') }}
                                <br>Admin-Portal</h1>
                        </div>
                    {% endif %}
                {% endblock %}
            </div>
        </div>

        {% set menu = knp_menu_get('admin_primary') %}
        {% if menu.hasChildren %}
            <div class="relative z-10 flex items-center lg:hidden">
                <button type="button"
                        @click="mobileMenuOpen = !mobileMenuOpen"
                        class="rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-900"
                        aria-controls="mobile-menu"
                        :aria-expanded="mobileMenuOpen ? 'true' : 'false'">
                    <span class="sr-only">Menü öffnen</span>
                    <twig:ux:icon name="ph:list" class="block h-6 w-6" aria-hidden="true" />
                    <twig:ux:icon name="ph:x" class="hidden h-6 w-6" aria-hidden="true" />
                </button>
            </div>
        {% endif %}
        <div class="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center lg:space-x-4">

                {% if is_granted('ROLE_ADMIN') %}
                    <a href="{{ path('admin_frontend_preview') }}"
                       target="_blank"
                       class="rounded-md py-2 px-3 inline-flex items-center text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-900/80 hover:text-gray-900 dark:hover:text-gray-50">
                        Frontend
                    </a>
                    <a href="{{ path('admin_cms') }}"
                       data-turbo="false"
                       class="rounded-md py-2 px-3 inline-flex items-center text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-900/80 hover:text-gray-900 dark:hover:text-gray-50">
                        CMS
                    </a>
                    {# ESI fragment (short TTL) so the staged-attendances badge
                       stays fresh while the surrounding page is cached a year. #}
                    {{ render_esi(controller('Ferienpass\\AdminBundle\\Controller\\Fragment\\StashCountController')) }}
                {% endif %}

            <div class="flex items-center space-x-3">
                <button type="button"
                        command="show-modal"
                        aria-label="Search"
                        commandfor="admin-command-palette"
                        class="hover:cursor-pointer rounded-md py-2.5 px-3 inline-flex items-center gap-1 text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800/50 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors">

                    <twig:ux:icon name="ph:magnifying-glass" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-400" aria-hidden="true" />
                    <kbd class="font-sans text-xs/4 text-gray-500 not-in-[.macos]:after:content-['Strg+K'] in-[.macos]:after:content-['⌘K']"></kbd>

                </button>

                <button type="button"
                        command="show-modal"
                        aria-label="Create"
                        commandfor="admin-create-palette"
                        class="hover:cursor-pointer rounded-md py-2.5 px-3 inline-flex items-center gap-1 text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800/50 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors">

                    <twig:ux:icon name="ph:plus" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-400" aria-hidden="true" />
                    <kbd class="font-sans text-xs/4 text-gray-500 not-in-[.macos]:after:content-['Strg+Enter'] in-[.macos]:after:content-['⌘Enter']"></kbd>

                </button>

            {# Rendered via ESI so the dropdown can vary on session cookie while
               the surrounding page is cached by user-context hash. #}
            {{ render_esi(controller('Ferienpass\\AdminBundle\\Controller\\Fragment\\UserNavigationController')) }}
            </div>
        </div>
    </div>

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

</div>

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