{% 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_logo_container_class: "container",
    header_burger_logo_url: "",
    header_logo_width: "2",
    header_logo_height: "1",
    header_logo_layout: "responsive",
    header_primary_active: false,
    header_menu_wrapper: true,
    header_burger_logo: true,
    header_menu_tertiary: true,
    header_menu_markets: false,
    header_menu_social: false,
} %}

{# Common Cases for Menu manipulations:
 #  - Add a menu entry > replace_recursive with new menu item
 #  - add/set class in menu entry > replace_recursive with existing menu item and the class property to change
 #  - remove a menu entry > remove_keys with keys of items to remove
#}

{# 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
 #
 # 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 this structure:
 #   link - URL for link
 #   label - Displayed label for link
 #   class - css class for link container (optional)
#}

{% set mappform_url = config.get('theme/mappform_url', false) %}

<div id="site-header" class="blocks blocks-header blocks-header-default">
    {% block header %}
        {% block logo_wrapper %}
            <div class="logo-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        {% block logo %}
                            <div class="col-6 align-self-center">
                                <a href="{{ options.header_home_url }}" aria-label="Startseite">
                                    <amp-img
                                            src="{{ options.header_logo_url }}"
                                            width="{{ options.header_logo_width }}"
                                            height="{{ options.header_logo_height }}"
                                            layout="{{ options.header_logo_layout }}"
                                            alt="logo"
                                            class="logo"
                                            data-amp-auto-lightbox-disable
                                            noloading
                                    ></amp-img>
                                </a>
                            </div>
                        {% endblock %}
                        {% block burger %}
                            <div class="col-6 align-self-center justify-content-end d-flex">
                                <div class="market-dropdown">
                                    <label on="tap:marketList.toggleVisibility" role="label" tabindex="0">
                                        <span>{{ Menu.markets.de.label|default('de') }}</span>
                                        <svg focusable="false" viewBox="0 0 256 158.19" width="12" height="7" xmlns="http://www.w3.org/2000/svg"><title>Chevron Down</title><path d="M225.81 0L128 97.81 30.19 0 0 30.19l128 128 128-128L225.81 0z"></path></svg>
                                    </label>
                                    <div class="markets-dropdown-list">
                                        <ul id="marketList" hidden>
                                            {% for market in Menu.markets|default([]) %}
                                                <li>
                                                    <a href="{{ market.url }}"
                                                       rel="noopener"
                                                       aria-label="{{ market.label|default }}">{{ market.label }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                                <div role="button"
                                     tabindex="0"
                                     on="tap:amp-menu.toggle"
                                     class="burger-wrapper d-flex align-items-center justify-content-center">
                                    <div id="burger" tabindex="0">
                                        <div class="burger-icon">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endblock %}
                    </div>
                </div>
            </div>
        {% endblock %}

        {% block menu_wrapper %}
            {% if options.header_menu_wrapper %}
                <div class="menu-wrapper d-flex align-items-center container-fluid">
                    <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" target="{{ item.target|default('_self') }}" aria-label="{{ item.label|default }}"
                                           href="{{ item.link|default }}">{{ item.label|default }}</a>
                                    </li>
                                {% endfor %}

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

        {% block burgermenu %}
            <amp-sidebar
                    id="amp-menu"
                    layout="nodisplay"
                    side="right"
                    style="width:100%;max-width:100%;background-color:#2E302F; animation-duration:0ms"
            >

                <div class="nav-wrapper">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-12 d-flex align-items-center">
                                {% block burger_logo %}
                                    {% if options.header_burger_logo %}
                                        <div class="burger_logo">
                                            <a href="{{ options.header_home_url }}" aria-label="Startseite">
                                                <amp-img
                                                        src="{{ options.header_burger_logo_url }}"
                                                        width="{{ options.header_logo_width }}"
                                                        height="{{ options.header_logo_height }}"
                                                        layout="{{ options.header_logo_layout }}"
                                                        alt="logo"
                                                        class="logo"
                                                        data-amp-auto-lightbox-disable
                                                        noloading
                                                ></amp-img>
                                            </a>
                                        </div>
                                    {% endif %}
                                {% endblock %}
                                <div role="button"
                                     tabindex="0"
                                     on="tap:amp-menu.close"
                                     class="burger-wrapper ml-auto d-flex align-items-center justify-content-center">
                                    <svg data-test-id="Icon" class="Wrapper-jVvkfh dTzJsL" width="24" height="51px"
                                         fill="#fff"
                                         viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Close</title>
                                        <path d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="nav-menu">
                    {% block navigation %}
                        <div class="container-fluid">
                            <div class="row">
                                {% if options.header_menu_tertiary %}
                                    <div class="col-12">
                                        <ul class="navbar-nav nav-list small">
                                            {% if Menu.get('tertiary') %}
                                                {% for key, item in Menu.tertiary %}
                                                    <li class="nav-item {{ item.class|default }}">
                                                        <a class="nav-link" href="{{ item.link|default }}" aria-label="{{ item.label|default }}">{{ item.label|default }}</a>
                                                    </li>
                                                {% endfor %}
                                            {% endif %}
                                        </ul>
                                    </div>
                                {% endif %}
                                <div class="col-12">
                                    <ul class="navbar-nav nav-list">
                                        {% if Menu.get('primary') %}
                                            {% for key, item in Menu.primary %}
                                                <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" href="{{ item.link|default }}" aria-label="{{ item.label|default }}">{{ item.label|default }}</a>
                                                </li>
                                            {% endfor %}
                                        {% endif %}
                                    </ul>
                                </div>
                                <div class="col-12">
                                    <ul class="navbar-nav nav-list small">
                                        {% if Menu.get('additional') %}
                                            {% for key, item in Menu.additional %}
                                                <li class="nav-item {{ item.class|default }}">
                                                    <a class="nav-link" href="{{ item.link|default }}" aria-label="{{ item.label|default }}">{{ item.label|default }}</a>
                                                </li>
                                            {% endfor %}
                                        {% endif %}
                                    </ul>
                                </div>

                                {% block header_social %}
                                {% if options.header_menu_social %}
                                <div class="col-12">
                                    <div class="socialContainer">
                                        <div class="social-hl">{{ options.header_text_social|default }}</div>
                                        <div class="navbar ">
                                            <ul class="navbar-nav mr-auto">
                                                {% for key, item in Menu.social %}
                                                    <li class="nav-item {{ item.class|default }}">
                                                        <a href="{{ item.link|default }}"
                                                           class="nav-link d-flex align-items-center justify-content-center"
                                                           target="_blank" rel="noopener"
                                                           aria-label="{{ item.label|default }}">
                                                            {% if icon is defined %}
                                                                {{ icon.svg(key) }}
                                                            {% endif %}
                                                        </a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                {% endblock %}

                                {% if options.header_menu_markets %}
                                    <div class="col-12 section-hl">{{ options.header_text_edition|default }}</div>

                                    {# get half of entries #}
                                    {% set batchSize = ((Menu.markets|default([])|length)/2)|round(0, 'ceil') %}

                                    {# display entries in 2 cols #}
                                    <div class="col-6 col-md-4 col-xl-6">
                                        <ul class="navbar-nav small menu-markets">
                                            {% for market in Menu.markets|slice(0, batchSize) %}
                                                <li class="nav-item external {{ market.class|default }}">
                                                    <a class="nav-link" href="{{ market.url }}"
                                                       target="_blank" rel="noopener" aria-label="{{ market.label|default }}">{{ market.label }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                    <div class="col-6 col-md-8 col-xl-6">
                                        <ul class="navbar-nav small menu-markets">
                                            {% for market in Menu.markets|slice(batchSize, batchSize) %}
                                                <li class="nav-item external {{ market.class|default }}">
                                                    <a class="nav-link" href="{{ market.url }}"
                                                       target="_blank" rel="noopener" aria-label="{{ market.label|default }}">{{ market.label }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endblock %}
                </div>
            </amp-sidebar>
        {% endblock %}
    {% endblock %}
</div>