{% load i18n oxyan category_tags ocyan_main ocyanjson wagtailsettings_tags %}

{% get_settings %}
{% if settings.ocyan_plugin_wagtail.OcyanSettings.promo_header %}
<div class="promo_header">
    <div class="container">
        <div class="promo_header_inner">
        {% for block in settings.ocyan_plugin_wagtail.OcyanSettings.promo_header %}
            {% if block.block_type == "TextSlider" %}
            <div class="promo_block textslider-wrapper">
                <div class="textslider">
                    <ul class="textslider-stage">
                    {% for slide in block.value %}
                        {% block textslide %}
                        <li class="textslide">{{ slide.text }}</li>
                        {% endblock %}
                    {% endfor %}
                    </ul>
                </div>
            </div>
            {% else %}
            <div class="promo_block {{ block.block.name }} {% if forloop.first %}first{% endif %}">
                {{ block }}
            </div>
            {% endif %}
        {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<div class="alert-messages-header">
    {% include "oscar/partials/alert_messages.html" with messages=messages %}
</div>
<header class="header-centered">
    <nav class="navbar navbar-expand-lg navbar-light header-inner">
        <div class="container">
            {% include 'partials/brand.html' with big=True %}

            {% block nav %}
            {% ocyanjson "theme" "menu_depth" 1 as menu_depth %}
            <div class="collapse navbar-collapse menu-bar page-menu-bar" id="navbarSupportedContent">
                <div class="brand-wrapper">
                    {% include 'partials/brand.html' with big=True %}
                </div>
                <ul class="navbar-nav">
            		<li class="megamenu">
            			<a class="toggler">
            				Assortiment
            			</a>
            			<ul class="inner">
	            		{% category_tree depth=menu_depth as category_tree_items %}
	                	{% include "webshop/mega_dropdown.html" with menu_items=category_tree_items %}
	                	</ul>
                	</li>
                    {% rootpage_as_category as page_tree_root %}
                    {% category_tree 2 page_tree_root as page_tree_items %}
                    {% include "partials/dropdown.html" with menu_items=page_tree_items limit=2 %}
                </ul>
            </div>
            {% endblock %}
            
			<!-- Aanpasbaar maken -->
			<div class="header-right">
                <a href="{% url 'customer:summary' %}" aria-label="{% trans 'Customer summary' %}" class="user-button menu-circle"><i class="fa fa-user-solid"></i></a>
				{% include 'oxyan/headers/partials/mini_basket.html' %}
			</div>
            <button class="navbar-toggler collapsed" aria-label="Navbar toggle" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                <i class="fa fa-bars nav-icon"></i>
                <i class="fa fa-times nav-icon"></i>
            </button>
        </div>
    </nav>
</header>