{% extends '@designs-default/blocks/header/default.twig' %}

{% set options = options|default({}) + {
    header_home_url: "https://www.ad-magazin.de",
    header_text_social: "Follow",
    header_logo_container_class: "container",
    header_logo_url: asset('extensions/vendor/cnd/designs/admagazin/images/architectural-digest-logo.svg','extensions'),
    header_search: true,
} %}


{% block header %}
    <div class="navigation d-flex align-items-center">
        {% block logo %}
            <div class="logo-wrapper">
                <a href="{{ options.header_home_url }}" aria-label="Startseite">
                    <img class="logo" src="{{ options.header_logo_url }}" alt="logo">
                </a>
            </div>
        {% endblock %}
        {% block logo_additional %}{% endblock %}
        <div class="navbar-wrapper">
            {% block burgermenu %}
                <!-- MOBILE MENU -->
                <div class="burger-trigger d-block d-lg-none ml-auto"></div>
                <div id="menu-burger" class="d-lg-none">
                    <ul class="nav d-block">
                        {% for key,item in menu_primary|default %}
                            <li class="nav-item {{ item.cssclass|default }}">
                                <a class="nav-link" aria-label="{{ item.label|default }}" href="{{ item.ref|default }}">{{ item.label|default }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                    <ul>
                        <li class="nav-item social-icons">
                            {% for key,item in Menu.social|default %}
                                <a class="nav-link"
                                   href="{{ item.link|default }}"
                                   aria-label="{{ item.label|default }}"
                                   rel="noopener"
                                   target="_blank">
                                    <i class="{{ item.icon }}"></i>
                                </a>
                            {% endfor %}
                        </li>
                        <li class="nav-item subscribe">
                            <a class="nav-link"
                               href="{{ Menu.get('additional').subscribe.link|default }}">
                                {{ Menu.get('additional').subscribe.label|default }}
                            </a>
                        </li>
                        {% if options.header_search %}
                            <li class="nav-item searchbar">
                                <form action="/search" method="get" id="searchform-burger" name="searchform-burger">
                                    <input type="text" name="q" id="searchterm-mobile" placeholder="Suchbegriff...">
                                    <a href="javascript:void(0)" class="search-button" aria-label="Suche"
                                       onclick="document.forms['searchform-burger'].submit();">
                                        <i class="fas fa-search"></i>
                                    </a>
                                </form>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            {% endblock %}

            {% block menu %}
                <!-- DESKTOP MENU -->
                <div id="menu-main" class="d-none d-lg-block">
                    <ul class="nav nav-main">
                        {% for key,item in Menu.primary|default %}
                            <li class="nav-item {{ item.class|default }}">
                                <a class="nav-link" aria-label="{{ item.label|default }}"  href="{{ item.link|default }}" rel="noopener" target="{{ item.target|default('_self') }}">{{ item.label|default }}</a>
                            </li>
                        {% endfor %}
                    </ul>

                    <ul class="nav nav-additional">
                        {# Used the getter as the Twig has problems with calling it as a simple property in an IF #}
                        {% if Menu.get('additional').follow|default %}
                            <li class="nav-item social-icons">
                                {% for key,item in Menu.social|default %}
                                    <a class="nav-link"
                                       href="{{ item.link|default }}"
                                       target="_blank">
                                        <i class="{{ item.icon }}"></i>
                                    </a>
                                {% endfor %}
                            </li>
                            <li class="nav-item follow">
                                <a class="nav-link"
                                   aria-label="{{ Menu.additional.follow.label|default }}"
                                   href="{{ Menu.additional.follow.link|default }}">
                                    {{ Menu.additional.follow.label }}
                                </a>
                            </li>
                        {% endif %}

                        {% if Menu.get('additional').subscribe|default %}
                            <li class="nav-item header-menu-promo">
                                <a class="nav-link"
                                   aria-label="{{ Menu.additional.subscribe.label|default }}"
                                   href="{{ Menu.additional.subscribe.link|default }}">
                                    {{ Menu.additional.subscribe.label }}
                                </a>
                            </li>
                        {% endif %}

                        {% if options.header_search %}
                            <li class="nav-item searchbar">
                                <form action="/search" method="get" id="searchform-main" name="searchform-main">
                                    <input type="text" name="q" id="searchterm-desktop" placeholder="Suchbegriff...">
                                    <a href="javascript:void(0)" class="search-button" aria-label="Suche"
                                       onclick="document.forms['searchform-main'].submit();">
                                    </a>
                                </form>
                            </li>
                            <li class="nav-item searchicon">
                                <i class="fas fa-search"></i>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            {% endblock %}
        </div>

        {% block scroll_indicator %}
            <div class="scroll_indicator" id="scroll_indicator_main"></div>
        {% endblock %}

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

    <script>
      $(function () {
        cnDesign.admagazin.cnStickyNavigation()
        cnDesign.admagazin.cnHideNavItems()
      })
    </script>
{% endblock %}