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

{% if menu.hasChildren %}
    <nav class="hidden lg:py-2 lg:flex lg:space-x-1 -ml-3" aria-label="Global">
        {% for item in menu.children|filter(v => v.isDisplayed) %}
            {% if item.extra('mega_menu') %}
                {% set isOpen = item.current ? 'true' : 'false' %}
                <div class="relative" x-data="{ open: false }" @keydown.escape.window="open = false" @click.outside="open = false">
                    <button type="button"
                            @click="open = !open"
                            :aria-expanded="open ? 'true' : 'false'"
                            aria-haspopup="true"
                            class="rounded-md py-2 px-3 inline-flex items-center gap-1 text-sm font-medium text-gray-900 dark:text-gray-100 {% if item.current %}bg-gray-50 dark:bg-gray-800 {% endif %}hover:bg-gray-100 dark:hover:bg-gray-900/80 hover:text-gray-900 dark:hover:text-gray-50">
                        <span>{{ item.label|trans }}</span>
                        <span class="inline-flex size-3.5 transition-transform" :class="{ 'rotate-180': open }">
                            <twig:ux:icon name="ph:caret-down" class="size-3.5" />
                        </span>
                    </button>

                    <div x-show="open"
                         x-cloak
                         x-transition:enter="transition ease-out duration-150"
                         x-transition:enter-start="opacity-0 -translate-y-1"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-100"
                         x-transition:leave-start="opacity-100 translate-y-0"
                         x-transition:leave-end="opacity-0 -translate-y-1"
                         class="absolute right-0 mt-1 z-40 w-[min(720px,calc(100vw-2rem))] origin-top-right rounded-lg bg-white dark:bg-gray-900 shadow-xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden"
                         role="menu"
                         aria-orientation="vertical">
                        <div class="grid grid-cols-2 gap-x-1 p-2">
                            {% for group in item.children|filter(g => g.isDisplayed and g.extra('mega_group') and g.children|length > 0) %}
                                <div class="p-2">
                                    <div class="px-2 mb-1 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ group.label }}</div>
                                    <ul>
                                        {% for entry in group.children|filter(v => v.isDisplayed) %}
                                            {% set active = entry.current %}
                                            <li>
                                                <a href="{{ entry.uri }}"
                                                   role="menuitem"
                                                   class="flex items-start gap-3 px-2 py-2 rounded-md transition-colors {% if active %}bg-primary-50 dark:bg-primary-900/30{% else %}hover:bg-gray-50 dark:hover:bg-gray-800/60{% endif %}">
                                                    <span class="size-9 rounded-md flex items-center justify-center shrink-0 {% if active %}bg-primary-100 dark:bg-primary-900/50 text-primary-700 dark:text-primary-300{% else %}bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400{% endif %}">
                                                        <twig:ux:icon name="{{ entry.extra('icon')|default('ph:circle') }}" class="size-5" />
                                                    </span>
                                                    <span class="min-w-0">
                                                        <span class="block text-sm font-semibold {% if active %}text-primary-800 dark:text-primary-200{% else %}text-gray-900 dark:text-gray-100{% endif %}">{{ entry.label|trans }}</span>
                                                        {% if entry.extra('desc') %}
                                                            <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ entry.extra('desc') }}</span>
                                                        {% endif %}
                                                    </span>
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% elseif item.current %}
                <a aria-current="page"
                   href="{{ item.uri }}"
                   class="rounded-md py-2 px-3 inline-flex items-center text-sm font-semibold text-primary-600 dark:text-gray-50 hover:bg-gray-100 dark:hover:bg-gray-900/80 dark:hover:text-gray-50">
                    {{ item.label|trans }}
                </a>
            {% else %}
                <a href="{{ item.uri }}"
                   class="rounded-md py-2 px-3 inline-flex items-center text-sm font-medium text-gray-900 dark:text-gray-100 {% if item.extra('isTrail') %}bg-gray-50 dark:bg-gray-800 {% endif %}hover:bg-gray-100 dark:hover:bg-gray-900/80 hover:text-gray-900 dark:hover:text-gray-50">
                    {{ item.label|trans }}
                </a>
            {% endif %}
        {% endfor %}
    </nav>
{% endif %}
