{{#if skipNav }}
    {{ render '@skip-nav' }}
{{/if}}

{{#if marketingBar }}
    {{ render '@marketing-bar' }}
{{/if}}

{{#if contactBar }}
    {{ render '@contact-bar' }}
{{/if}}

<header class="header {{ class }}" {{{ attributes }}}>
    <div class="container">
        <div class="header__wrapper">
            {{#if logo}}
                {{ render '@logo' logo merge="true" }}
            {{/if}}

            {{#if sideMenu}}
                {{ render '@side-menu' }}
            {{/if}}

            {{#if buttons }}
                <div class="header__buttons">
                    {{#each buttons as |item| }}
                        <div class="header__icon">
                            <a
                                class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    {{ item.class }}
                                "
                                href="#"
                                aria-label="{{ item.ariaLabel }}"
                            >
                                {{ render '@icon' item.icon }}
                                <span class="header-button__label">{{ label }}</span>
                            </a>
                        </div>
                    {{/each}}

                    {{#if minicart}}
                        <div class="header__minicart">
                            <button
                                type="button"
                                class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    modal-trigger
                                    margin-left-xs
                                "
                                aria-label="{{ minicartTrigger.ariaLabel }}"
                                data-modal-trigger="modal-minicart"
                            >
                                {{ render '@icon' minicartTrigger.icon }}
                                <span class="header-button__counter">
                                    <span class="header-button__counter-dot">2</span>
                                </span>
                                <span class="header-button__label">{{ minicartTrigger.label }}</span>
                            </button>
                        </div>

                        {{ render '@modal--secondary' minicartModal merge=true }}
                    {{/if}}
                </div>
            {{/if}}

            {{#if search }}
                <div class="header__search-wrapper">
                    <form class="search-form">
                        <div class="search-form__wrapper">
                            {{ render '@input' searchInput }}
                            {{ render '@button--icon' searchButton }}
                        </div>
                        {{#if quicksearch }}
                            {{ render '@quicksearch' }}
                        {{/if}}
                    </form>
                </div>
            {{/if}}
        </div>
    </div>
</header>

{{#if megaMenu }}
    {{ render '@mega-menu' }}
{{/if}}