{% trans_default_domain 'admin' %}
{% set menu = knp_menu_get('admin_primary') %}

<nav x-show="mobileMenuOpen"
     class="lg:hidden"
     aria-label="Global"
     id="mobile-menu">
    <div class="pt-2 pb-3 px-2 space-y-1">
        {% for item in menu.children|filter(v => v.isDisplayed) %}
            {% if item.extra('mega_menu') %}
                <div class="mt-3 first:mt-0">
                    <div class="px-3 pb-1 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ item.label|trans }}</div>
                    {% for group in item.children|filter(g => g.isDisplayed and g.extra('mega_group') and g.children|length > 0) %}
                        {% for entry in group.children|filter(v => v.isDisplayed) %}
                            <a href="{{ entry.uri }}"
                               class="block rounded-md py-2 px-3 text-base font-medium {% if entry.current %}text-primary-700 dark:text-primary-300 bg-primary-50 dark:bg-primary-900/30{% else %}text-gray-900 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white{% endif %}">
                                {{ entry.label|trans }}
                            </a>
                        {% endfor %}
                    {% endfor %}
                </div>
            {% elseif item.current %}
                <strong aria-current="page"
                        class="block py-2 px-3 text-base font-bold text-gray-900">
                    {{ item.label|trans }}
                </strong>
            {% else %}
                <a href="{{ item.uri }}"
                   class="block rounded-md py-2 px-3 text-base font-medium text-gray-900 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white">
                    {{ item.label|trans }}
                </a>
            {% endif %}
        {% endfor %}
    </div>

    {% if app.user %}
        <div class="border-t border-gray-200 dark:border-gray-700 pt-4 pb-3">
            <div class="px-4 flex items-center">
                <div class="flex-shrink-0">
                 <span class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-gray-400">
                        <span class="text-md font-medium leading-none text-white" data-controller="ferienpass--admin-personalize" data-ferienpass--admin-personalize-source-value="[data-current-user-initials]"></span>
                    </span>
                </div>
                <div class="ml-3">
                    <div class="text-base font-medium text-gray-800 dark:text-gray-200" data-controller="ferienpass--admin-personalize" data-ferienpass--admin-personalize-source-value="[data-current-user-fullname]"></div>
                    <div class="text-sm font-medium text-gray-500 dark:text-gray-400" data-controller="ferienpass--admin-personalize" data-ferienpass--admin-personalize-source-value="[data-current-user-email]"></div>
                </div>
            </div>


            {% set menu = knp_menu_get('host_user_navigation') %}
            <div class="mt-3 px-2 space-y-1">
                {% for item in menu.children|filter(v => v.isDisplayed) %}
                    {% if item.current %}
                        <strong aria-current="page"
                                class="block py-2 px-3 text-base font-bold text-gray-500 dark:text-gray-300">{{ item.label|trans }}</strong>
                    {% elseif item.extra('method', 'get')|lower == 'post' %}
                        {# State-changing items (logout, impersonation-exit) -> POST form #}
                        <form action="{{ item.uri }}" method="post" data-turbo="false">
                            <button type="submit"
                                    class="block w-full text-left rounded-md py-2 px-3 text-base font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white">{{ item.label|trans }}</button>
                        </form>
                    {% else %}
                        <a href="{{ item.uri }}"
                           class="block rounded-md py-2 px-3 text-base font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white">{{ item.label|trans }}</a>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    {% endif %}
</nav>
