<header
    x-data="{ open: false }"
    x-init="$watch('open', value => document.body.classList.toggle('overflow-hidden', value))"
    @keydown.window.escape="open = false"
>
    <nav>
        <div class="container py-2">
            <div class="flex items-center">
                <a class="block flex-none max-h-[44px] max-w-[220px]" href="{{ homepage }}">
                    <span class="sr-only">{{ site:name }}</span>
                    {{ partial:components/molecules/global/logo classes="size-full" }}
                </a>
                <div class="grow">
                    <div class="flex justify-end lg:hidden">
                        <button type="button" class="-m-2.5 flex items-center justify-center rounded-md p-2.5 leading-none text-primary-900" @click="open = true">
                            {{ trans key="menu" }} {{ partial:components/atoms/icons/menu }}
                        </button>
                    </div>
                    <div class="hidden lg:flex lg:items-center lg:justify-end lg:space-x-6">
                        <div class="flex items-center space-x-6">
                            {{ nav:utility }}
                                {{ unless no_results }}
                                    <a
                                        href="{{ url }}"
                                        class="text-primary-900 hover:underline"
                                        >{{ title }}</a
                                    >
                                {{ /unless }}
                            {{ /nav:utility }}
                        </div>
                        {{ if sites:count > 1 }}
                        <div>
                            <div x-data x-menu class="relative">
                                <button x-menu:button class="flex items-center gap-1 bg-transparent">
                                    {{ site:handle | upper }}
                                    {{ partial:components/atoms/icons/chevron-down }}
                                </button>
                                <div
                                    x-menu:items
                                    x-transition.origin.top.right
                                    class="absolute -left-4 top-full z-10 mt-3 rounded-xl bg-white p-2 shadow-lg"
                                    x-cloak
                                >
                                    {{ sites }}
                                        <a
                                            x-menu:item
                                            href="{{ url }}"
                                            class="block rounded-lg px-3 py-2 text-base font-semibold text-primary-900 hover:bg-gray-50"
                                        >
                                            {{ handle | upper }}
                                        </a>
                                    {{ /sites }}
                                </div>
                            </div>
                        </div>
                        {{ /if }}
                        {{ partial:components/molecules/content/button_group buttons="{ cta:buttons }" }}
                    </div>
                    <div x-popover:group class="hidden lg:flex lg:justify-end lg:gap-x-8 lg:mt-2 lg:py-1.5">
                        {{ nav:main }}
                            {{ unless no_results }}
                                {{ if children }}
                                    <div x-data x-popover class="relative">
                                        <button x-popover:button type="button" class="flex items-center gap-x-1 text-lg font-semibold leading-9 text-primary-900 transition-colors hover:text-primary-500" aria-expanded="false">
                                            {{ title }}
                                            {{ partial:components/atoms/icons/chevron-down }}
                                        </button>

                                        <div x-popover:panel x-cloak x-transition.origin.top.left class="absolute -left-4 top-full z-10 mt-3 w-56 rounded-xl bg-white p-2 shadow-lg">
                                            {{ children }}
                                                <a href="{{ url }}" class="block rounded-lg px-3 py-2 text-base font-semibold text-primary-900 hover:bg-gray-50">{{ title }}</a>
                                            {{ /children }}
                                        </div>
                                    </div>
                                {{ else }}
                                    <a href="{{ url }}" class="text-lg font-semibold leading-9 text-primary-900 transition-colors hover:text-primary-500">{{ title }}</a>
                                {{ /if }}
                            {{ /unless }}
                        {{ /nav:main }}
                        <div x-data="{ open: false }" class="flex justify-center">
                            <button type="button" x-on:click="open = true" class="flex items-center gap-x-1 text-lg font-semibold leading-9 text-primary-900 cursor-pointer transition-colors hover:text-primary-500">
                                {{ partial:components/atoms/icons/search size="size-6" }}
                            </button>

                            <div
                                x-dialog
                                x-model="open"
                                x-cloak
                                class="fixed inset-0 overflow-hidden z-10"
                            >
                                <div x-dialog:overlay x-transition.opacity class="fixed inset-0 bg-black/50"></div>

                                <div class="fixed inset-x-0 top-0 w-full">
                                    <div
                                        x-dialog:panel
                                        x-transition:enter="transition origin-top ease-out duration-300"
                                        x-transition:enter-start="-translate-y-full"
                                        x-transition:enter-end="translate-y-0"
                                        x-transition:leave="transition origin-top ease-in duration-300"
                                        x-transition:leave-start="translate-y-0"
                                        x-transition:leave-end="-translate-y-full"
                                        class="h-full w-full"
                                    >
                                        <div class="w-full bg-white">
                                            {{ partial:components/molecules/blocks/container classes="flex items-center justify-between py-6" }}
                                                <div class="grow">
                                                    {{ partial src="components/organisms/forms/search-form" }}
                                                </div>
                                                <button type="button" x-on:click="$dialog.close()" class="flex items-center justify-center rounded-md p-2.5 text-primary-900">
                                                    {{ trans key="close" }}
                                                    {{ partial:components/atoms/icons/close }}
                                                </button>
                                            {{ /partial:components/molecules/blocks/container }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div x-description="Mobile menu, show/hide based on menu open state." class="lg:hidden" x-ref="dialog" x-show="open" aria-modal="true" style="display: none;">
        <div class="fixed inset-0 z-10 bg-black/20"></div>
        <div class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-8 py-2 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" @click.away="open = false">
            <div class="flex items-center justify-between">
                <a href="{{ homepage }}">
                    <span class="sr-only">{{ site:name }}</span>
                    {{ partial:components/molecules/global/logo classes="h-11 w-auto" }}
                </a>
                <button type="button" class="-m-2.5 flex items-center justify-center rounded-md p-2.5 leading-none text-primary-900" @click="open = false">
                    {{ trans key="close" }} {{ partial:components/atoms/icons/close }}
                </button>
            </div>
            <div class="mt-6 flow-root">
                <div class="-my-6 divide-y divide-gray-500/10">
                    <div x-popover:group class="space-y-2 py-6">
                        {{ nav:main }}
                            {{ unless no_results }}
                                {{ if children }}
                                    <div x-data x-popover class="-mx-3">
                                        <button x-popover:button type="button" class="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-lg font-semibold text-primary-900 hover:bg-gray-50" aria-controls="disclosure-2" aria-expanded="false">
                                            {{ title }}
                                            {{ partial:components/atoms/icons/chevron-down }}
                                        </button>
                                        <div x-popover:panel x-cloak x-transition.origin.top.left class="mt-2 space-y-2" id="disclosure-2">
                                            {{ children }}
                                                <a href="{{ url }}" class="block rounded-lg py-2 pl-6 pr-3 text-base text-primary-900 hover:bg-gray-50">{{ title }}</a>
                                            {{ /children }}
                                        </div>
                                    </div>
                                {{ else }}
                                    <a href="{{ url }}" class="-mx-3 block rounded-lg px-3 py-2 text-lg font-semibold text-primary-900 hover:bg-gray-50">{{ title }}</a>
                                {{ /if }}
                            {{ /unless }}
                        {{ /nav:main }}
                    </div>
                    {{ nav:utility }}
                        {{ if first }}
                            <div class="py-6">
                        {{ /if }}
                        {{ unless no_results }}
                            <a href="{{ url }}" class="-mx-3 block rounded-lg px-3 py-2.5 text-base text-primary-900 hover:bg-gray-50">{{ title }}</a>
                        {{ /unless }}
                        {{ if last }}
                            </div>
                        {{ /if }}
                    {{ /nav:utility }}
                </div>
            </div>
        </div>
    </div>
</header>
