{% load currency_filters %}
{% load category_tags %}
{% load i18n %}
{% load ocyan_wagtail %}
{% load ocyanjson %}

{% ocyanjson "theme" "menu_depth" 2 as menu_depth %}

<div class="navbar primary navbar-static-top">
    <div class="container">

        <a class="btn btn-default navbar-btn btn-cart navbar-right hidden-md hidden-lg pull-left" href="{% url 'basket:summary' %}">
            <i class="icon-shopping-cart"></i>
            {% trans "Basket" %}
            {% if not request.basket.is_empty %}
                {% if request.basket.is_tax_known %}
                    {% blocktrans with total=request.basket.total_incl_tax|currency:request.basket.currency %}
                        Total: {{ total }}
                    {% endblocktrans %}
                {% else %}
                    {% blocktrans with total=request.basket.total_excl_tax|currency:request.basket.currency %}
                        Total: {{ total }}
                    {% endblocktrans %}
                {% endif %}
            {% endif %}
        </a>

        <div class="navbar-header">
            {# This is used in mobile view #}
            <a class="btn navbar-toggle collapsed" data-toggle="collapse" data-target=".primary-collapse">
                <span class="fa fa-bars"></span>
            </a>
        </div>

        <div class="navbar-collapse primary-collapse collapse">
            {% block nav_dropdown %}
                <ul id="browse" class="nav navbar-nav">
                    <li class="dropdown active {% if expand_dropdown %}open{% endif %}">
                        <a href="#" class=" hidden-xs hidden-sm dropdown-toggle" {% if not expand_dropdown %} data-toggle="dropdown"{% endif %}>
                            {% trans "Products" %}
                            <span class="fa fa-chevron-down"></span>
                        </a>
                        <ul class="dropdown-menu" data-navigation="dropdown-menu">
                            {% category_tree depth=menu_depth as tree_categories %}
                            <li class="nochildren"><a tabindex="-1" href="{% url 'catalogue:index' %}">{% trans "All products" %}</a></li>

                            {% if tree_categories %}
                                {% for tree_category in tree_categories %}
                                    {% if tree_category.depth == 1 %}
                                    {% if tree_category.has_children %}
                                    <li>
                                        <a tabindex="-1">{{ tree_category.name }}</a>
                                        <div class="mega-menu">
                                            <a class="mega-menu-header" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a>
                                    {% else %}
                                    <li><a tabindex="-1" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a></li>
                                    {% endif %}

                                    {% elif tree_category.depth == 2 %}
                                            <a class="col-xs-12" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a>
                                    {% endif %}

                                    {% for close in tree_category.num_to_close %}
                                       </div>
                                    </li>
                                    {% endfor %}

                                {% endfor %}
                            {% endif %}
                            {% block nav_dropdown_extra_items %}
                                <li><a href="{% url 'offer:list' %}">{% trans "Offers" %}</a></li>
                            {% endblock %}
                        </ul>
                    </li>
                    {% block nav_extra %}
                        {% rootpage_as_category as page_tree_root %}
                        {% category_tree menu_depth|add:1 page_tree_root as page_tree_items %}
                        {% include "partials/dropdown.html" with menu_items=page_tree_items limit=1 %}
                    {% endblock %}
                </ul>
            {% endblock %}
        </div><!-- /navbar-collapse -->
    </div>
</div><!-- /navbar -->