{% set options = options|default({}) + {
    header_home_url: "https://cnx.condenast.de",
    header_logo_url: asset('extensions/vendor/cnd/designs/cnx/images/cnx_logo_monogram_white.svg','extensions'),
    header_nav_container_class: "",
    header_variant: 'default',
} %}

{# Logic -------------------------------------------------------------------------------------------------------------#}

{% setcontent configurations = 'configurations' limit 1 returnsingle %}
{% set config_menu = configurations.menu|json_decode %}
{% set items = [] %}

{# We need to slugify the array indexes for the cases of menureplace and menuremove #}
{% for key, value in config_menu.primary %}
    {% set key = value.label|slug %}
    {% set items = items|merge({(key): value}) %}
{% endfor %}
{% set Menu = Menu|merge({'primary': items}) %}

{# Templating --------------------------------------------------------------------------------------------------------#}
<div id="site-header">
    <div class="blocks blocks-header blocks-header-{{ options.header_variant }} container-fluid">
        {% block header %}

            <div class="nav-wrapper d-flex align-items-center justify-content-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 %}
                    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                            data-target="#overlay-menu-primary" aria-controls="overlay-menu-primary"
                            aria-expanded="false" aria-label="Navigation anzeigen">
                        <span class="burger-element"></span>
                        <span class="burger-element"></span>
                        <span class="burger-element"></span>
                    </button>
                {% endblock %}
            </div>

            {% block menu %}{% endblock %}

            {% block burgermenu %}
                <div id="overlay-menu-primary" class="collapse">
                    <div class="nav-content">
                        <div class="container">
                            <div class="row">
                                <div class="col-12">
                                    <ul class="navbar-nav">
                                        {# Menu is able to translate items via translation extension #}
                                        {% set currentLang = app["translate.slug"]|default %}
                                        {% for item in Menu.primary|default %}
                                            {# Translate if configured #}
                                            {% if item.translate|default %}
                                                <li class="nav-item {{ item.class|default }}">
                                                    <a class="nav-link" rel="noopener" target="{{ item.target|default('_self') }}" aria-label="{{ item.label|default }}"
                                                       href="/{{ currentLang~item.link|default }}">{{ item.label|default }}</a>
                                                </li>
                                                {# Standard case without translation   #}
                                            {% else %}
                                                <li class="nav-item {{ item.class|default }}">
                                                    <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>
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endblock %}

            {% block custom %}{% endblock %}

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

    {% block header_script %}{% endblock %}

</div>