{% extends "oscar/catalogue/browse.html" %}

{% load display_tags %}
{% load basket_tags %}
{% load category_tags %}
{% load product_tags %}
{% load i18n %}
{% load oxyan %}
{% load ocyanjson %}
{% load wagtailcore_tags %}

{% block title %} {% if summary %}{{summary}}{% else %}{{ block.super }}{% endif %}{% wagtail_site as current_site %}{% if current_site.site_name %} - {{ current_site.site_name }}{% endif %}{% endblock title %}

{% block column_left %}
<div class="column-left collapse show" id="column-left">
    <span data-bs-toggle="collapse" data-bs-target="#column-left" class="close-column"></span>
    <div class="column-left-inner">
        <div class="column-left-mobile-header" data-bs-toggle="collapse" data-bs-target="#column-left">
            <span class="h2">{% trans "Filters" %} <i class="fa fa-times"></i></span>
        </div>
        {% block prepend_column_left %}
        {{block.super}}
        {% endblock %}

        {% block categories %}
        {% ocyanjson "theme" "category_navigation_depth" 1 as category_navigation_depth %}
        {% category_tree depth=category_navigation_depth as tree_categories %}
        {% if tree_categories %}
        <div class="category-item">
            <span class="category-header h2" data-bs-toggle="collapse" data-bs-target="#sidebar_categories">{% trans "Categories" %}</span>
            <nav class="nav-category collapse show" id="sidebar_categories">
                <div class="category-body">
                    <ul>
                        {% for tree_category, info in tree_categories %}
                        <li class="depth-{{tree_category.depth}}">
                            <a class="{% if tree_category.pk == category.pk %}active{% endif %}" href="{{ tree_category.url }}">
                                {{ tree_category.name }}
                            </a>
                        </li>
                        {% if info.level|add:1 == category_navigation_depth and tree_category|startswith:category %}
                        {% include "oscar/catalogue/partials/activetree.html" %}
                        {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            </nav>
        </div>
        {% endif %}
        {% endblock %}

        {% block facets %}
        {% if has_facets %}
        <div class="side_categories">
            <div class="facets">
                {% for field, data in facet_data.items %}
                {% if data.results %}
                {% include 'oscar/search/partials/facet.html' with name=data.name items=data.results %}
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endblock %}

        {% block append_column_left %}
        {{block.super}}
        {% endblock %}
    </div>
</div>
{% endblock %}

{% block content %}
{% block category_blocks %}
    {% ocyanjson "oscar" "show_child_category_blocks" 0 as show_child_category_blocks %}
    {% if show_child_category_blocks and category.depth <= show_child_category_blocks and category.has_children %}
        {% include 'oscar/catalogue/partials/category_blocks.html' %}
    {% endif %}
{% endblock %}

{% block product_list %}
{% ocyanjson "themes" "product_column_classes" as product_column_classes %}

<button class="btn btn-primary btn-filter" accesskey="f" data-bs-toggle="collapse" data-bs-target="#column-left" aria-label="Filter">
    <i class="fa fa-sliders"></i> {% trans "Filter" %} {% blocktrans count num_results=paginator.count %}<strong>{{ num_results }}</strong> result.{% plural %}<strong>{{ num_results }}</strong> results.{% endblocktrans %}
</button>

<form method="get" class="form-results">
    {# Render other search params as hidden inputs #}
    {% for value in selected_facets %}
    <input type="hidden" name="selected_facets" value="{{ value }}" >
    {% endfor %}
    <input type="hidden" name="q" value="{{ search_form.q.value|default_if_none:"" }}" >

    <div class="paginator-wrapper">
    {% if paginator.count %}
    <div class="paginator-results">
    {% if paginator.num_pages > 1 %}
{% blocktrans with start=page_obj.start_index end=page_obj.end_index count num_results=paginator.count %}<strong>{{ num_results }}</strong> result - showing <strong>{{ start }}</strong> to <strong>{{ end }}</strong>.{% plural %}<strong>{{ num_results }}</strong> results - showing <strong>{{ start }}</strong> to <strong>{{ end }}</strong>.{% endblocktrans %}
    {% else %}
{% blocktrans count num_results=paginator.count %}<strong>{{ num_results }}</strong> result.{% plural %}<strong>{{ num_results }}</strong> results.{% endblocktrans %}
    {% endif %}
    {% if page_obj.has_next %}
            <a href="?{% get_parameters page %}page={{ page_obj.next_page_number }}">
                {% trans "Next page" %}.
            </a>
    {% endif %}
    </div>
    {% if search_form %}
    <div class="sortby-wrapper">
        {% include "oscar/partials/form_field.html" with field=search_form.sort_by style='horizontal' %}
    </div>
    {% endif %}
    {% else %}
    <p>
        {% trans "<strong>0</strong> results." %}
    </p>
    {% endif %}
    </div>
</form>

{% block product_list_section %}
{% if products %}
<section class="products-wrapper">
    {% block category_top %}{% endblock %}
    <div class="products row">
        {% for product in products %}
        <div class="{% if product_column_classes %}{{product_column_classes}}{% else %}col-6 col-lg-4 col-xl-4{% endif %}">
            {% if forloop.counter > 2 %}
            {% render_product product %}
            {% else %}
            {% with notlazy=True %}{% render_product product %}{% endwith %}
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% block category_bottom %}{% endblock %}
    {% include "oscar/partials/pagination.html" %}
</section>
{% else %}
<p>{% trans "No products found." %}</p>
{% endif %}
{% endblock product_list_section %}

{% endblock product_list %}
{% endblock content %}

{% block onbodyload %}
{{ block.super }}
oscar.search.init();
{% endblock %}