{# Navigation Settings #}
{% set primaryNavigation = craft.navigation.nodes('primaryNavigation') %}
{% set secondaryNavigation = craft.navigation.nodes('secondaryNavigation') %}

{# Main navigation #}
<div id="topOfSitePixelAnchor" class="top-of-site-pixel-anchor absolute w-px h-px top-[100vh] left-0" aria-hidden="true"></div>
<header id="primaryNavigation" class="global-header w-full">
    <div class="background-wrapper bg-white w-full h-header-height relative flex flex-col justify-start items-start border-b border-solid border-mintyy-gray-iii">
        <div class="container-wrapper w-full h-full max-w-7xl mx-auto flex flex-col justify-start items-start">
            <div class="content-wrapper w-full h-full flex flex-row items-center 1.5xl:px-10 {{ activateMaintenance ? 'justify-center' : 'justify-between' }}">
                <div class="left-wrapper relative z-2 flex flex-row justify-start items-start">
                    <div class="logo-wrapper px-6 sm:px-8 lg:px-10 1.5xl:px-0 py-6 lg:py-8">
                        <a id="globalNavigationLogo" href="/" class="home-global-link-nav flex active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2 group" title="Habilitas - Home">
                            <span class="sr-only">
                                Habilitas - Home
                            </span>
                            {{ svg(svgPath ~ '/logo/habilitas-brandmark.svg') | attr({ 'data-type': 'brandmark', class: 'w-full max-w-8 min-w-6 text-brand-terracotta-i pointer-events-none overflow-visible xxs:hidden' }) }}
                            {{ svg(globalLogo) | attr({ 'data-type': 'logo', class: 'w-full xs:max-w-36 lg:max-w-44 h-12 text-brand-terracotta-i pointer-events-none hidden xxs:block' }) }}
                        </a>
                    </div>
                </div>
                {% if not activateMaintenance %}
                    {# The desktop links - always centered, dissapears when font size is increased via accessibility features #}
                    <div id="desktopCenterLinksWrapper" class="center-wrapper w-full h-full absolute z-1 hidden lg:flex top-0 left-1/2 -translate-x-1/2 transition-opacity duration-300">
                        <div class="links-wrapper w-full flex flex-row justify-center items-center gap-10 xl:gap-16">
                            {% for navItem in primaryNavigation.level(1) %}
                                {% if navItem.children | length %}
                                    <div class="parent-link-container h-full flex flex-row justify-center items-center -mx-5 xl:-mx-8 px-5 xl:px-8 group/parent peer/parent">
                                        <a href="{{ navItem.url }}" title="{{ navItem.title }}" class="nav-link w-auto text-lg xl:text-xl text-black-primary font-body font-medium transition-colors duration-700 group-hover/parent:text-brand-terracotta-aa group-focus/dropdown:text-brand-terracotta-aa group-active/dropdown:text-brand-terracotta-aa">
                                            {{ navItem.title }}
                                        </a>
                                        <button class="desktop-dropdown-button ml-4 flex justify-center items-center peer/dropdown group/dropdown">
                                            <span class="sr-only">Click to toggle dropdown menu.</span>
                                            {{ svg(svgPath ~ '/core/caret-down-icon.svg') | attr({ class: 'w-3 transition-colors duration-700 text-black-primary group-hover/parent:rotate-180 group-focus/dropdown:rotate-180 group-active/dropdown:rotate-180 group-hover/parent:text-brand-terracotta-i group-focus/dropdown:text-brand-terracotta-i group-active/dropdown:text-brand-terracotta-i pointer-events-none' }) }}
                                        </button>
                                        {% include themeDir ~ '/_includes/_blocks/_header/_nav-dropdown.twig' %}
                                    </div>
                                {% else %}
                                    <a href="{{ navItem.url }}" title="{{ navItem.title }}" class="nav-link w-auto text-lg xl:text-xl text-black-primary font-body font-medium transition-colors duration-700 hover:text-brand-terracotta-aa">
                                        {{ navItem.title }}
                                    </a>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="right-wrapper flex flex-row justify-start items-start lg:items-center pr-6 sm:pr-8 lg:px-10 1.5xl:px-0">
                        <div class="cta-buttons xl:relative bg-white-primary flex flex-row justify-start items-center border-2 border-solid border-brand-terracotta-aa rounded-full">
                            {# The main search bar toggle button #}
                            <button id="navSearchButton" title="Click to open the search bar" class="nav-search-button relative z-2 pl-6 pr-5 w-15 h-15 rounded-full active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2 group">
                                <span class="sr-only">Click to open the search bar</span>
                                {{ svg(svgPath ~ '/core/search-icon.svg') | attr({ class: 'w-6 transition-colors duration-700 text-brand-terracotta-i group-hover:text-black-primary pointer-events-none' }) }}
                            </button>

                            {# The global nav search bar #}
                            <div id="navSearchWrapper" data-state="closed" class="search-input hidden absolute z-30 !max-w-53 sm:!max-w-[10.25rem] lg:!max-w-[10.125rem] max-w-8xl w-full sm:w-80 md:w-100 lg:w-120 xl:w-160 px-6 sm:p-0 h-16 top-6 xl:top-[-0.125rem] -right-px sm:right-[1.975rem] lg:right-[2.625rem] xl:right-0 flex flex-row justify-start items-center rounded-full transition-all duration-300">
                                <div id="searchClickWrapper" class="search-click-wrapper absolute w-screen h-screen right-0 -top-6 opacity-0"></div>
                                <div class="inner-wrapper w-full h-16 relative bg-white-primary flex flex-row justify-start items-center rounded-full">
                                    {# The search bar search icon #}
                                    <div class="nav-search-icon absolute z-2 pl-6 sm:pl-[1.625rem] pr-5 w-15 h-15 flex justify-center items-center rounded-full active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2 group">
                                        <span class="sr-only">Search</span>
                                        {{ svg(svgPath ~ '/core/search-icon.svg') | attr({ class: 'w-6 transition-colors duration-700 text-brand-terracotta-i group-hover:text-black-primary pointer-events-none' }) }}
                                    </div>

                                    {# The search bar #}
                                    <form id="navSearchForm" class="w-full h-16 relative rounded-full" action="/search" method="post">
                                        <label class="sr-only" for="navSearchInput">Search</label>
                                        <input id="navSearchInput" type="search" placeholder="Search" class="w-full placeholder:opacity-0 h-16 pl-16 font-body font-normal text-lg text-black-primary placeholder:text-gray-400 border-2 border-solid border-brand-terracotta-aa rounded-full transition-colors duration-300 placeholder:transition-colors placeholder:duration-300 active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2" />
                                    </form>

                                    {# The close button for the search bar #}
                                    <button id='searchCloseButton' class="search-close-button absolute right-0 bg-brand-terracotta-i w-24 lg:w-23 h-15 flex flex-col justify-center items-center rounded-full active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2">
                                        <span class="sr-only">Close Search Bar</span>
                                        <span class="icon-wrapper flex flex-col">
                                            <span id="searchButtonTopBar" class="top-bar bg-white w-8 h-0.5 origin-center transition-transform duration-200"></span>
                                            <span id="searchButtonBottomBar" class="bottom-bar bg-white w-8 h-0.5 mt-3 origin-center transition-transform duration-200"></span>
                                        </span>
                                    </button>
                                </div>
                            </div>

                            {# The main navigation toggle button #}
                            <button id='navToggleButton' class="bg-brand-terracotta-i relative z-20 w-23 h-15 relative flex flex-col justify-center items-center rounded-full active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2">
                                <span class="sr-only">Open Menu</span>
                                <span class="icon-wrapper flex flex-col pointer-events-none">
                                    <span id="navigationTopBar" class="top-bar bg-white w-8 h-0.5 origin-center transition-transform duration-200"></span>
                                    <span id="navigationBottomBar" class="bottom-bar bg-white w-8 h-0.5 mt-3 origin-center transition-transform duration-200"></span>
                                </span>
                            </button>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% include themeDir ~ '/_includes/_blocks/_header/_nav-menu.twig' %}
</header>