{% load currency_filters wagtailcore_tags wagtailsettings_tags i18n ocyan_wagtail wagtailimages_tags category_tags ocyanjson cache wagtailcore_tags ocyan_main %}
{% with cache_time=300 %}

{% ocyanjson "theme" "menu_depth" 1 as menu_depth %}
{% rootpage_as_category as page_tree_root %}

{% block header_tekst %}
{% ocyanjson "theme" "header" "header1" as header_type %}

        {% if settings.ocyan_plugin_wagtail.OcyanSettings.promo_header %}
        <div class="content-header-{{ header_type }} container-header-bg {{ header_type }}">
            <div class="content-header container">
                {% for block in settings.ocyan_plugin_wagtail.OcyanSettings.promo_header %}
                    {% if block.block_type == "TextSlider" %}
                    <div class="textslider-wrapper">
                        <div class="textslider">
                            <ul class="textslider-stage">
                            {% for slide in block.value %}
                                <li class="textslide"><i class="fa fa-check"></i> {{ slide.text }}</li>
                            {% endfor %}
                            </ul>
                        </div>
                    </div>
                    {% else %}
                    <div class="{{ block.block.name }} {% if forloop.first %}first{% endif %}">
                        {{ block }}
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
{% endblock %}


{% block header_promo %}
        <div class="header_promo bg-dark">
            <div class="container">
                <div class="header_promo_inner">
                    <div class="d-lg-none float-right mobile-menu-toggle">
                        <a data-toggle="collapse" data-target=".mobile-top-menu" class="dropdown-toggle no-caret nav-link" {% if not expand_dropdown %} data-toggle="dropdown"{% endif %} >
                            <i class="fa fa-bars text-white fa-2x"></i>
                        </a>
                    </div>
                    {% include "partials/brand.html" with big=False %}
                    {% include "partials/search.html" %}
                    {% if settings.ocyan_plugin_wagtail.OcyanSettings.header_content %}
                        <div class="header_tekst_top">
                            <ul class="header_content">
                                {% for block in settings.ocyan_plugin_wagtail.OcyanSettings.header_content %}
                                    <li class="{{ block.block.name }} {% if forloop.first %}first{% endif %}">
                                        {% include_block block %}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    
                    {% block mini_basket %}
                    <div class="mini-basket-wrapper mb-2 mb-lg-0">   
                        {% block menu_user %}
                        <ul class="navbar-nav mini-basket flex-row ml-lg-auto">
                            {% esi_fragment "partials/headers/header5/user-bar.html" with sessionid=True oscar_open_basket=True user=user csrf_token=csrf_token request=request basket=basket only %}
                        </ul>
                        {% endblock %}
                    </div>
                    {% endblock %}
                </div>
            </div>
        </div>
{% endblock %}

<nav class="navbar navbar-expand-lg nav-bg navbar-light p-0 main-header">
    <div class="container">
        {% block nav_dropdown %}
        <div class="collapse mr-auto navbar-collapse" style="position: relative; z-index: 10;" id="subheader">
                {% cache cache_time header_5_menu LANGUAGE_CODE request.site %}
                
                {% category_tree depth=2 as category_tree_items %}

                <ul id="browse" class="navbar-nav head-menu w-100 d-flex" data-path="{{ request.path }}">

                    <li class="dropdown active {% if page.depth == 2 %} {% endif %} {% if expand_dropdown %}closed{% endif %} nav-item mr-lg-2 xs-mr-0">
                        
                        <a href="{% url 'catalogue:index' %}" class="dropdown-toggle btn-browse custom-dd no-caret nav-link btn-primary text-white d-none d-lg-block" {% if not expand_dropdown %} data-toggle="dropdown"{% endif %}>
                            <i class="fa fa-chevron-down"></i>
                            <span class="product-dropdown-title">{% trans "Products" %}</span>
                        </a>
                        <ul class="dropdown-menu mt-2 product-dropdown" style="margin-top: 0px;" data-navigation="dropdown-menu">

                            {% include "partials/headers/header5/dropdown.html" with menu_items=category_tree_items %}

                            {% block nav_dropdown_extra_items %}
                            {% endblock %}
                        </ul>
                    
                    </li>

                    {% block extra_menu_label %}
                    {% if settings.ocyan_plugin_themes.MenuSettings.extra_menu_label %}
                    <li class="dropdown active position-unset hide-mobile {% if page.depth == 2 %} {% endif %} {% if expand_dropdown %}closed{% endif %} nav-item mr-lg-2 xs-mr-0">
                        <a href="{% url 'catalogue:index' %}" class="dropdown-toggle btn-browse custom-dd no-caret nav-link btn-primary text-white" {% if not expand_dropdown %} data-toggle="dropdown"{% endif %}>
                            <i class="fa fa-chevron-down"></i>
                            <span class="product-dropdown-title">{{ settings.ocyan_plugin_themes.MenuSettings.extra_menu_label }}</span>
                        </a>
                        <div class="dropdown-menu mt-2 extra_menu big_menu" style="margin-top: 0px;" data-navigation="dropdown-menu">
                            <div class="dropdown-inner row">
                                {% for block in settings.ocyan_plugin_themes.MenuSettings.extra_items %}
                                    <div class="col-12 {{block.value.width}} mb-4">
                                        {{ block.value.body }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </li>
                    {% endif %}
                    {% endblock %}

                    {% block nav_extra %}
                        {% include "partials/headers/header5/dropdown.html" with nav_items=page_tree_items limit=1 %}
                    {% endblock %}
                </ul>
                {% endcache %}
        </div><!-- /navbar-collapse -->
        {% endblock %}            
        {% block menu_items %}
        <div class="d-lg-flex mobile-top-menu ml-lg-auto">
            {% category_tree menu_depth|add:1 page_tree_root as page_tree_items %}
            {% for menu_item in page_tree_items %}
                <a href="{{ menu_item.get_absolute_url }}" class="text-white nav-link fix-btn {% if menu_item.name == page.title %}active{% endif %}">
                    {{ menu_item.name }}
                </a>
            {% endfor %}
        </div>
        {% endblock %}
    </div>
</nav><!-- /navbar -->
{% endwith %}

<div class="header_backdrop closed"></div>