{{ global_header_type = (default_configuration:header_type === 'inherit' ? 'full' : default_configuration:header_type) }}
{{ page_header_type = null }}
{{ if page:header_type }}
    {{ page_header_type = (page:header_type === 'inherit' ? null : page:header_type) }}
{{ /if }}
{{ _header_type = page_header_type ?: global_header_type }}
<header
    class="fixed top-0 z-40 w-full bg-white/100"
    x-data="{ selectedMenuItem: null}"
    @resize.window.debounce="window.innerWidth >= 1024 ? mobileMenuOpen = false :  null; window.innerWidth < 1024 ? selectedMenuItem = null : null"
    x-effect="mobileMenuOpen ? document.body.classList.add('overflow-hidden') : document.body.classList.remove('overflow-hidden')"
    @click.outside="selectedMenuItem = null"
    @keydown.window.escape="selectedMenuItem = null"
>
    <nav
        class="relative z-40"
        role="menubar"
        x-data="{
            toggleMenuItem(menuItem) {
                selectedMenuItem === menuItem ? selectedMenuItem = null : selectedMenuItem = menuItem
            }
        }"
    >
        {{ if site_details:hasSponsorshipNav }}
            <div id="sponsorship-login" class="container-1 h-9.5 bg-brand-black text-white lg:h-[2.8125rem]">
                <div class="flex justify-end">
                    <a class="flex items-center gap-1.5" href="{{ site:attributes:sponsorshipLoginUrl }}">
                        {{ svg src="images/icons/account_circle.svg" class="size-6 fill-current" }}
                        <span class="underline">{{ trans:mwb.sponsorships.my_sponsorships }}</span>
                    </a>
                </div>
            </div>
        {{ /if }}
        <div class="container-1 border-b border-black/5 bg-white">
            <div class="z-40 flex h-20 w-full items-center justify-between max-xl:!px-2 lg:h-24">
                <a class="mr-2 block" href="{{ site:url }}" role="menuitem" aria-labelledby="site-logo">
                    {{ svg src="{{ site_details:textLogoPath }}" alt="{trans:mwb.app_name}" id="site-logo" class="block w-[13.25rem] h-[3.813rem] lg:w-[20.75rem] lg:h-24" }}
                </a>
                {{ partial:nav/dropdowns :when="_header_type === 'full'" }}
                {{# navbar buttons #}}
                <div class="flex items-center gap-4 xs:ml-2 2xl:ml-6">
                    {{ if _header_type === 'full' }}
                        <div class="max-lg:!hidden">
                            <button
                                class="btn-search group"
                                @click="toggleMenuItem('search')"
                                role="menuitem"
                                aria-label="{{ trans:mwb.searches.search }}"
                            >
                                {{ svg src="images/icons/search.svg" class="w-8 h-8 group-hover:fill-white group-active:fill-white" }}
                            </button>
                        </div>
                    {{ /if }}
                    {{ if _header_type !== 'minimal' }}
                        {{ if page:is_custom_donate_button && page:donate_button_link }}
                            {{ donate_href = "{{ page:donate_button_link }}" }}
                        {{ else }}
                            {{ donate_href = "{{ default_pages:donation_page }}" }}
                        {{ /if }}
                        <a
                            class="btn-filled btn-orange flex-nowrap max-lg:!h-[2.625rem] max-lg:!font-medium max-xxs:hidden xxs:flex"
                            href="{{ donate_href }}"
                            x-show="mobileMenuOpen === false"
                            role="menuitem"
                            aria-label="{{ trans:mwb.donations.donate }}"
                        >
                            {{ trans:mwb.donations.donate }}
                        </a>
                    {{ /if }}
                    {{ if _header_type === 'full' }}
                        {{# hamburger button #}}
                        <button
                            @click="mobileMenuOpen = !mobileMenuOpen"
                            class="pointer-events-auto flex h-6 w-6 items-center justify-end space-x-4 overflow-hidden lg:hidden"
                        >
                            <span class="relative flex w-6 items-center justify-center">
                                <span
                                    class="absolute h-1 w-full transform bg-current transition duration-300"
                                    :class="mobileMenuOpen ? 'translate-y-0 rotate-45' : '-translate-y-2'"
                                ></span>
                                <span
                                    class="absolute h-1 w-full transform bg-current transition duration-300"
                                    :class="mobileMenuOpen ? 'opacity-0 translate-x-3' : 'opacity-100'"
                                ></span>
                                <span
                                    class="absolute h-1 w-full transform bg-current transition duration-300"
                                    :class="mobileMenuOpen ? 'translate-y-0 -rotate-45' : 'translate-y-2'"
                                ></span>
                            </span>
                        </button>
                    {{ /if }}
                </div>
                {{# end navbar buttons #}}
                {{ if _header_type === 'full' }}
                    {{ partial:nav/hamburger donate_href="{{ donate_href }}" }}
                {{ /if }}
            </div>
        </div>
        {{ if _header_type === 'full' }}
            <div class="container-1 h-25.5 w-full bg-brand-teal" x-show="selectedMenuItem === 'search'" x-cloak>
                <div class="relative flex w-full items-center justify-center">
                    {{ partial:form/search }}
                    <div class="absolute lg:right-4 xl:right-16 2xl:right-24">
                        <button class="btn-link text-white" @click="toggleMenuItem('search')">
                            {{ trans:mwb.searches.close }}
                        </button>
                    </div>
                </div>
            </div>
        {{ /if }}
    </nav>
    <div
        id="overlay-mask"
        x-cloak
        class="fixed z-30 h-full w-full bg-black/60"
        x-show="selectedMenuItem !== null"
        @click="selectedMenuItem = null"
    ></div>
</header>