{% set options = options|default({}) + {
    header_home_url: "https://www.condenast.de",
    header_text_social: "Folgen sie uns",
    header_text_edition: "Edition",
    header_logo_url: "",
    header_container_class: "",
    header_nav_container_class: "container-fluid",
    header_burger_logo_url: "",
    header_primary_active: false,
    header_secondary_active: false,
    header_variant: 'default',
    header_promo_link: Menu.promotion.abo.link|default('#'),
    header_promo_class: Menu.promotion.abo.class|default,
    header_promo_label: Menu.promotion.abo.label|default('Abo'),
    header_burger_container_class: 'container-lg',
} %}

{# This header required the Menu global from the Designs Extension #}

{# Required Variables (In context or any theme.yml):
 #    menu.primary - First level navigation
 #    menu.secondary - Second level navigation (optional)
 #    menu.social - Social media channels
 #    menu.markets - List of all other markets
 #    menu.additional - Additional navigation (small links in burger on compass sites)
 #
 # Optioal Variables (In context or any theme.yml):
 #    menureplace.primary - List of menu entries that will recursively replace entries with same name in menu_primary or add to it (usefull if you only want to change a few elements)
 #    menureplace.secondary - List of menu entries that will overwrite entries with same name in menu_secondary or add to it (usefull if you only want to change a few elements)
 #    menureplace.social - List of menu entries that will overwrite entries with same name in menu_social or add to it (usefull if you only want to change a few elements)
 #    menureplace.markets - List of menu entries that will overwrite entries with same name in menuoverride_markets or add to it (usefull if you only want to change a few elements)
 #
 #    menuremove.primary - List of menu item keys that will be removed
 #    menuremove.secondary - List of menu item keys that will be removed
 #    menuremove.social - List of menu item keys that will be removed
 #    menuremove.markets - List of menu item keys that will be removed
 #
 # All menu entries need to have these attributes:
 #   link - URL for link
 #   label - Displayed label for link
 #   class - css class for link container (optional)
 #   target - a tag target attribute (optional, default: _self)
 #   active - Only used in secondary, mak this entry as active (optional)
#}


<div id="site-header">
    <div class="blocks blocks-header blocks-header-{{ options.header_variant }} {{ options.header_container_class }}">
        {% block header %}

            <div class="nav-wrapper d-flex align-items-center {{ options.header_nav_container_class }}">
                {% block logo %}
                    <div class="logo">
                        <a href="{{ options.header_home_url }}" aria-label="Startseite">
                            <img src="{{ options.header_logo_url }}" alt="logo" class="img-fluid">
                        </a>
                    </div>
                {% endblock %}
                {% block nav_additional %}
                    <div class="nav-additional ml-auto align-self-sm-start">
                        {% block header_menu_markets %}
                            <div class="markets">
                                {% block header_menu_markets_button_label %}
                                    <button class="btn btn-ghost small dropdown" type="button"
                                        data-toggle="collapse" data-target="#overlay-markets-primary"
                                        aria-controls="overlay-markets-primary"
                                        aria-expanded="false"
                                        aria-label="Märkte anzeigen">{{ Menu.markets.de.label|default('Deutschland') }}</button>
                                {% endblock %}
                                {% block header_menu_markets_overlay %}
                                    <div id="overlay-markets-primary" class="collapse">
                                        <ul class="menu-markets">
                                            {% for market in Menu.markets|default([]) %}
                                                <li class="nav-item">
                                                    <a class="nav-link" href="{{ market.url }}"
                                                       rel="noopener"
                                                       target="_blank" aria-label="{{ market.label|default }}">{{ market.label }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% endblock %}
                            </div>
                        {% endblock %}

                        {% block header_menu_promo %}
                            <div class="header-menu-promo d-none d-lg-inline-block">
                                <span class="nav-item">
                                    <a href="{{ options.header_promo_link }}" aria-label="{{ options.header_promo_label|default }}" class="nav-link {{ options.header_promo_class }}">{{ options.header_promo_label }}</a>
                                </span>
                            </div>
                        {% endblock %}

                        {% block header_menu_burger %}
                            <button class="navbar-toggler" type="button" data-toggle="collapse"
                                    data-target="#overlay-menu-primary" aria-controls="overlay-menu-primary"
                                    aria-expanded="false" aria-label="Navigation anzeigen">
                                <svg class="navbar-toggler-icon" focusable="false" viewBox="0 0 32 32" width="32"
                                     height="32" xmlns="http://www.w3.org/2000/svg"><title>Menu</title>
                                    <path d="M6 22h20v-2H6v2zm0-5h20v-2H6v2zm0-7v2h20v-2H6z"></path>
                                </svg>
                            </button>
                        {% endblock %}
                    </div>
                {% endblock %}
            </div>

            {% block menu %}
                <div class="menu-wrapper d-flex align-items-center {{ options.header_nav_container_class }}">
                    {% block menu_primary %}
                        <div class="navbar row">
                            <div class="col-12" id="site-menu-primary">
                                <ul class="navbar-nav">

                                    {% for key,item in Menu.primary|default %}
                                        <li class="nav-item {{ item.class|default }} {{ options.header_primary_active is same as(item.link|split('/')|last|split('?')|first) ? 'active' : '' }}">
                                            <a class="nav-link"
                                               rel="noopener" aria-label="{{ item.label|default }}"
                                               target="{{ item.target|default('_self') }}"
                                               href="{{ item.link|default }}">{{ item.label|default }}</a>
                                        </li>
                                    {% endfor %}

                                </ul>
                            </div>
                        </div>
                    {% endblock %}

                    {% block menu_secondary %}
                        {# Used the getter as the Twig has problems with calling it as a simple property in an IF #}
                        {% if Menu.get('secondary') %}
                            <div class="navbar navbar-level-2 row">
                                <div class="col-12" id="site-menu-secondary">
                                    <ul class="navbar-nav mr-auto">

                                        {% for key,item in Menu.secondary %}
                                            <li class="nav-item {{ item.class|default }} {{ options.header_secondary_active is same as(item.link|split('/')|last|split('?')|first) ? 'active' : '' }}">
                                                <a class="nav-link"
                                                   aria-label="{{ item.label|default }}"
                                                   href="{{ item.link|default }}">{{ item.label|default }}</a>
                                            </li>
                                        {% endfor %}

                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                    {% endblock %}
                </div>
            {% endblock %}

            {% block burgermenu %}
                <div id="overlay-menu-primary" class="collapse">

                    <div class="nav-wrapper d-flex align-items-center {{ options.header_burger_container_class  }}">
                        <div class="logo">
                            <a href="{{ options.header_home_url }}" aria-label="Startseite">
                                <img src="{{ options.header_burger_logo_url }}" alt="logo" class="img-fluid">
                            </a>
                        </div>
                        <div class="nav-additional ml-auto align-self-sm-start">
                            <button class="navbar-toggler" aria-label="Navigation anzeigen">
                                <svg class="navbar-toggler-icon" focusable="false" viewBox="0 0 32 32" width="32"
                                     height="32" xmlns="http://www.w3.org/2000/svg"><title>Close</title>
                                    <path d="M9 7.5L7.4 9l7 7.1L8 22.7l1.4 1.4 6.7-6.7 7 7 1.5-1.3-7-7.1L24 9.3l-1.4-1.4-6.7 6.7-7-7z"></path>
                                </svg>
                            </button>
                        </div>
                    </div>


                    <div class="nav-content {{ options.header_burger_container_class  }}">
                        <div class="row">

                            {# tertiary menu #}
                            <div class="col-12 col-lg-4">
                                <div class="nav-container">
                                    <ul class="navbar-nav">

                                        {% for key,item in Menu.tertiary|default %}
                                            <li class="nav-item {{ item.class|default }}">
                                                <a class="nav-link" aria-label="{{ item.label|default }}"
                                                   href="{{ item.link|default }}">{{ item.label|default }}</a>
                                            </li>
                                        {% endfor %}

                                    </ul>
                                </div>
                            </div>

                            {# primary menu #}
                            <div class="col-12 col-lg-4">
                                <div class="nav-container">
                                    <ul class="navbar-nav large">

                                        {% for key,item in Menu.primary|default %}
                                            <li class="nav-item {{ item.class|default }}" {{ options.header_primary_active is same as(item.link|split('/')|last|split('?')|first) ? 'active' : '' }}>
                                                <a class="nav-link"
                                                   rel="noopener"
                                                   target="{{ item.target|default('_self') }}"
                                                   aria-label="{{ item.label|default }}"
                                                   href="{{ item.link|default }}">{{ item.label|default }}</a>
                                            </li>
                                        {% endfor %}

                                    </ul>
                                </div>
                            </div>

                            <div class="col-12 col-lg-4">
                                <div class="nav-container">
                                    {# additional menu #}
                                    <ul class="navbar-nav">

                                        {% for key,item in Menu.additional|default %}
                                            <li class="nav-item {{ item.class|default }}">
                                                <a class="nav-link" aria-label="{{ item.label|default }}"
                                                   href="{{ item.link|default }}">{{ item.label|default }}</a>
                                            </li>
                                        {% endfor %}

                                    </ul>
                                </div>
                                <div class="nav-container social">
                                    <span class="social-label">{{ options.header_text_social }}</span>
                                    {# social menu #}
                                    <ul class="navbar-nav">

                                        {% for item in Menu.social|default %}
                                            <li class="nav-item {{ item.class|default }}">
                                                <a class="nav-link d-flex align-items-center justify-content-center"
                                                   href="{{ item.link|default }}"
                                                   rel="noopener"
                                                   aria-label="{{ item.label|default }}"
                                                   target="_blank">
                                                    <i class="{{ item.icon }} fa-inverse"></i>
                                                </a>
                                            </li>
                                        {% endfor %}

                                    </ul>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            {% endblock %}

            {% block custom %}{% endblock %}

        {% endblock %}
    </div>
    <div id="header-gap"></div>

    {% block header_script %}{% endblock %}

</div>