{% load currency_filters i18n oxyan category_tags ocyan_main ocyanjson cache wagtailsettings_tags %}

{% block header %}
{% ocyanjson "theme" "menu_depth" 1 as menu_depth %}
{% category_tree depth=menu_depth as category_tree_items %}

<header class="commerce">
    <nav class="navbar navbar-expand-lg navbar-light header-inner">
    	<div class="container">
    		<a class="nav-link d-lg-none" data-bs-toggle="collapse" data-bs-target="#menu_wrapper">
                <i class="fa fa-bars nav-icon"></i>
            </a>
            {% include 'oxyan/partials/brand.html' with big=True %}
            {% esi_fragment 'oxyan/headers/partials/user-bar.html' with sessionid=True oscar_open_basket=True messages=messages request=request csrf_token=csrf_token user=user basket=basket num_unread_notifications=num_unread_notifications only %}
    		
    	</div>
    	<div class="subheader w-100">
	        <div class="container d-flex align-items-center justify-content-between wrap_subheader">
	            <div class="left-text d-flex align-items-center">
	                <div class="navbar-collapse menu-bar" id="navbarSupportedContent">
	                    <ul class="navbar-nav d-lg-flex">
	                        <li class="nav-item dropdown {% if menu_depth > 1 %}position-unset{% endif %}">
	                            <a class="dropdown-toggle collapsed left-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="collapse" data-bs-target="#menu_wrapper" aria-expanded="false">
	                            	{% trans "Categories" %}
	                            </a>
	                            <div id="menu_wrapper" class="collapse collapsed">
	                                <div class="mobile-header">
	                                    <button class="navbar-toggler" aria-label="Navbar toggle" type="button" data-bs-toggle="collapse" data-bs-target="#menu_wrapper">
	                                        <i class="fa fa-times nav-icon"></i>
	                                    </button>
	                                </div>
	                                <div class="container p-0">
	                                    {% if menu_depth > 1 %}
	                                    <ul class="menu_inner icon-dropdown" aria-labelledby="navbarDropdown">
	                                        {% include "oxyan/headers/partials/commerce_dropdown.html" with menu_items=category_tree_items mega_menu=True dropdown=True %}
	                                    {% else %}
	                                    <ul class="dropdown-menu dropdown-simple" aria-labelledby="navbarDropdown">
	                                        {% include "oxyan/partials/dropdown_simple.html" with menu_items=category_tree_items dropdown=True %}
	                                    {% endif %}
	                                    </ul>
	                                </div>
	                            </div>
	                        </li>
	                    </ul>
                    	{% rootpage_as_category as page_tree_root %}
                    	{% category_tree 3 page_tree_root as page_tree_items %}
	                    <div class="page-menu-bar">
	                        <ul class="navbar-nav">
	                            {% include "oxyan/partials/dropdown.html" with menu_items=page_tree_items dropdown=True %}
	                        </ul>
	                    </div>
	                </div>
	            </div>
        	</div>
    	</div>
    </nav>
</header>
{% endblock %}