{% set siteStructure = craft.entries.section('portalContent').level('1').all() %}

<header class="header">
    <div class="header__content">
        <div class="header__left">
            <a class="header__logo" href="{{ siteUrl }}">
                {% include '_partials/image.twig' with {image: header.logo.one(), class: 'header__logo-img'} %}
            </a>

            <nav class="header__nav">
                {# START - top-level navigation (both mobile & desktop) #}
                <ul class="header__nav-list">
                    {% for navEntry in siteStructure %}
                        <li class="header__nav-item header__nav-item--has-submenu" data-submenu="submenu-{{ navEntry.slug }}">
                            <a href="#" class="header__nav-link" data-href="{{ navEntry.url }}">
                                <span>{{ navEntry.title }}</span>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
                {# END - top-level naviation #}

                {# START - mobile navigation footer #}
                <div class="header__nav-footer">
                    <div class="header__nav-footer-row">
                        <div class="header__search">
                            <i class="fa-solid fa-magnifying-glass header__search-icon" aria-hidden="true"></i>
                            <input type="text" class="header__search-input" placeholder="{{ header.searchFieldPlaceholder }}" />
                        </div>
                        {% include '_partials/language-select.twig' %}
                    </div>

                    <div class="header__actions">
                        {% include '_partials/link.twig' with {class: 'btn btn--primary header__cta-primary', link: header.orangeButton} %}
                        {% include '_partials/link.twig' with {class: 'btn btn--secondary header__cta-secondary', url: url('members-home'), label: header.loginButtonLabel, target: ''} %}
                    </div>
                </div>
                {# END - mobile navigation footer #}
            </nav>

            {# START - mobile hamburger icon #}
            <button class="header__burger" aria-label="{{ 'nav.mobile.burger.label' }}">
                <i class="fa-solid fa-bars header__burger-icon" aria-hidden="true"></i>
            </button>
            {# END - mobile hamburger icon #}
        </div>

        {# START - desktop top right navigation #}
        <div class="header__right">
            {% include '_partials/language-select.twig' %}

            <div class="header__search">
                <i class="fa-solid fa-magnifying-glass header__search-icon" aria-hidden="true"></i>
                <input type="text" class="header__search-input" placeholder="{{ header.searchFieldPlaceholder }}" />
            </div>

            <div class="header__actions">
                {% include '_partials/link.twig' with {class: 'btn btn--primary header__cta-primary', link: header.orangeButton} %}
                {% include '_partials/link.twig' with {class: 'btn btn--secondary header__cta-secondary', url: url('members-home'), label: header.loginButtonLabel, target: ''} %}
            </div>
        </div>
        {# END - desktop top right navigation #}
    </div>

    {# START - sub-menus (both desktop and mobile) #}
    {% for topEntry in siteStructure %}
        <div class="header__submenu" data-submenu-target="submenu-{{ topEntry.slug }}">
            <div class="header__submenu-content">
                {% for columnEntry in topEntry.children %}
                    <div class="header__submenu-column">
                        <h3 class="header__submenu-title">
                            {{ columnEntry.title | upper }}
                        </h3>
                        <ul class="header__submenu-list">
                            {% for linkEntry in columnEntry.children %}
                                <li>
                                    <a href="{{ linkEntry.url }}" class="header__submenu-link">{{ linkEntry.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endfor %}
                {# Add contact info if less than 3 submenu items #}
                {% if topEntry.children | length < 3 %}
                    <div class="header__submenu-contact">
                        <div class="header__submenu-column">
                            <h3 class="header__submenu-title">{{ contactInfo.officeLabel }}</h3>
                            {% set address = contactInfo.address.one() %}
                            <div class="header__submenu-text">
                                {{ address | address }}
                                <p><a href="https://maps.app.goo.gl/jco4jyDfVZKQJ4RH6" target="_blank" class="contact__link">{{ contactInfo.routeDescriptionLabel }}</a></p>
                            </div>
                            <h3 class="header__submenu-title">{{ contactInfo.emailAddressLabel }}</h3>
                            <div class="header__submenu-text">
                                <a href="mailto:{{ contactInfo.emailAddress }}" class="contact__link">{{ contactInfo.emailAddress }}</a>
                            </div>
                        </div>
                        <div class="header__submenu-column">
                            <h3 class="header__submenu-title">{{ contactInfo.openingHoursLabel }}</h3>
                            <div class="header__submenu-text">
                                {{ contactInfo.openingHours | nl2br }}
                            </div>
                            <h3 class="header__submenu-title">{{ contactInfo.phoneNumberLabel }}</h3>
                            <div class="header__submenu-text">
                                <a href="{{ contactInfo.phoneNumber.format('rfc3966') }}" class="contact__link">{{ contactInfo.phoneNumber.format('national') }}</a>
                            </div>
                            <h3 class="header__submenu-title">{{ contactInfo.supportUsLabel }}</h3>
                            <div class="header__submenu-text">
                                {{ contactInfo.bankAccounts | nl2br }}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    {% endfor %}
    {# END - sub-menus #}
</header>