<nav x-data="{ searchOpen: false, menuOpen: false, shadow: false, }" 
    class="bg-[#72bedf]"
    :class="{ 'shadow transition duration-200' : shadow }"
    @scroll.window="
        shadow = (window.pageYOffset > 20) ? true : false;
    ">
    <div class="mx-auto boxed px-1 sm:px-6 lg:px-4 z-20">
        <div class="relative flex h-12 items-center justify-between">
            <div class="absolute inset-y-0 left-0 flex items-center">
                                            
                <!-- Mobile Menu Button -->
                <button type="button"
                    class="relative inline-flex items-center justify-center rounded-md p-2 text-white"
                    aria-controls="mobile-menu" @click="menuOpen = !menuOpen; if (menuOpen) searchOpen = false" aria-expanded="false"
                    x-bind:aria-expanded="menuOpen.toString()">
                    <span class="absolute"></span>
                    <span class="sr-only">Apri il menu</span>
                    <svg x-state:on="Menu open" x-state:off="Menu closed"
                        class="block h-6 w-6" :class="{ 'hidden': menuOpen, 'block': !menuOpen }" fill="none"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu closed"
                    class="hidden h-6 w-6" :class="{ 'block': menuOpen, 'hidden': !menuOpen }" fill="none"
                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                    </svg>
                      
                </button>
            </div>

            <div class="flex flex-1 items-center justify-center">
                <div class="flex flex-shrink-0 items-center">
                    <a href="/" title="Vai alla Homepage">
                        <img class="h-8 w-auto -mt-[4px] " src="{{assets_dir}}/logo/logo_black.svg" alt="{{sitetitle}}">
                    </a>
                </div>
                <div class="hidden lg:ml-6 lg:block">
                    <div class="flex space-x-4">
                        {% for item in menus.main %}
                            {% if item.childs %}
                                {% include 'templates/components/common/dropdown-menu.twig' %}
                                {% else %}
                                <a href="{{item.url}}" class="px-2 py-2 font-semibold text-md">
                                    {{item.title}}
                                </a>
                            {% endif %}
                        {% endfor %}
                        
                    </div>
                </div>
            </div>
            <div class="space-x-4">
                <div class="absolute inset-y-0 right-2 flex items-center">
                    {% if type starts with 'schede_tecniche' %}
                        <div class="relative">
                            <div id="toggle_filters" class="h-10 w-10 text-white flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
                                </svg>
                                <span style="display: none;" id="filters_count" class="absolute top-0 -right-[2px] h-5 w-5 bg-red-500 flex items-center justify-center rounded-full text-xs" ></span>
                            </div>
                        </div>
                    {% endif %}
                    <!-- Search Button -->
                    <button type="button"
                        class="relative inline-flex items-center justify-center rounded-md p-2 text-white"
                        aria-controls="search-menu"  @click="searchOpen = !searchOpen; if (searchOpen) { menuOpen = false; $nextTick(() => { document.getElementById('searchInput')?.focus(); }) }" aria-expanded="false"
                        x-bind:aria-expanded="searchOpen.toString()">
                        <span class="absolute"></span>
                        <span class="sr-only">Apri la ricerca</span>
                        <div class="h-4 w-4 fill-white" :class="{ 'hidden': searchOpen, 'block': !searchOpen }">
                            {% include 'templates/components/icons/search.twig' %}
                        </div>
                        <svg x-description="Icon when search is open." x-state:on="Search open" x-state:off="Search closed"
                            class="hidden h-6 w-6" :class="{ 'block': searchOpen, 'hidden': !searchOpen }" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

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


    {% include 'templates/components/common/search-panel.twig' %}
    {% include 'templates/components/common/menu-panel.twig' %}

{#     <div
    x-cloak
    x-show="menuOpen"
    class="fixed inset-0 z-10 top-12 bg-slate-500/75 backdrop-blur-sm"
    x-transition:enter="transition ease-out duration-75"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-50"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    @click="menuOpen = false"
    ></div> #}

</nav>

