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

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

{% block content_wrapper %}
<div class="browse">
    <div class="browse-header">
        {% if category.image %}
            {% responsive_image category.image.file alt=category.name classes="background-image" %}
        {% endif %}
        {% block breadcrumb %}
        <div class="container breadcrumb-wrapper">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ homepage_url }}">{% trans "Home" %}</a></li>
                    <li class="breadcrumb-item"><a href="/category">{% trans "Shop" %}</a></li>
                    {% for category in category.get_ancestors %}
                    <li class="breadcrumb-item"><a href="{{ category.get_absolute_url }}">{{ category.name }}</a></li>
                    {% endfor %}
                    {% if category %}
                    <li class="breadcrumb-item active" aria-current="page">{{ category.name }}</li>
                    {% endif %}
                </ol>
            </nav>
        </div>
        {% endblock %}
        <div class="container products-outer {% block banner_classes %}{% endblock %}">
            <div class="row text-center">
                <div class="col-12">
                    {% block banner_header %}
                    <h1 class="mb-3">{% if category %}{{ category.name }}{% else %}{% trans "Shop" %}{% endif %}</h1>
                    {% include "oscar/catalogue/partials/category_description.html" with readmore=True %}
                    {% endblock %}
                </div>
            </div>
            {% block categories %}
            {% category_tree depth=1 as tree_categories %}
            {% if not category %}
            <div class="d-flex gap-3 justify-content-center flex-wrap mt-3">
                <a class="btn{% if not category %} active{% endif %}" href="/category">{% trans "All" %}</a>
                {% for tree_category, info in tree_categories %}
                    <a class="btn{% if tree_category.pk == category.pk %} active{% endif %}" href="{{ tree_category.url }}">
                        {{ tree_category.name }}
                    </a>
                {% endfor %}
            </div>
            {% endif %}
            <div class="d-flex gap-3 justify-content-center flex-wrap mt-3">
                {% for tree_category in category.get_children %}
                    <a class="btn{% if tree_category.pk == category.pk %} active{% endif %}" href="{{ tree_category.get_absolute_url }}">
                        {{ tree_category.name }}
                    </a>
                {% endfor %}
            </div>
            {% endblock %}
        </div>
    </div>
    <div class="container py-3" id="main_content">
        <div class="browse-products-header mb-3">
            {% block facets %}
            {% if has_facets %}
            <a rel="nofollow" tabindex="0" class="btn btn-filter" data-bs-toggle="modal" data-bs-target="#exampleModal">
                {% trans "Filter and sort" %} <i class="fa fa-sliders ms-2"></i>
            </a>
            <div class="modal fade facets-modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                        <div class="modal-header px-4">
                            <div class="d-flex flex-column">
                                <h3 class="mb-0">Filter and sort</h3>
                                <small>{{paginator.count}} {% trans "Results" %}</small>
                            </div>
                            <button type="button" class="btn-close me-3" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body px-4 py-4">
                            <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>
                        <div class="modal-footer">
                            <a class="btn btn-outline-dark w-100" href="{{ category.get_absolute_url }}">
                                {% trans "Clear filters" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
            {% endblock %}
            <form method="get" class="form-results">
                {% 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:"" }}" >
                {% if search_form %}
                <div class="sortby-wrapper">
                    {% include "oscar/partials/form_field.html" with field=search_form.sort_by style='horizontal' %}
                </div>
                {% endif %}
                <p class="results my-0 d-lg-inline-block d-none">
                    {{paginator.count}} {% trans "Products" %}
                </p>
            </form>
        </div>

        {% block product_list %}
            {% block category_top %}
                {{ block.super }}
            {% endblock %}

            <div class="products row mb-lg-0 mb-3">
                {% if products %}
                {% for product in products %}
                <div class="col-6 col-lg-4 col-xxl-3">
                    {% if forloop.counter > 2 %}
                    {% render_product product %}
                    {% else %}
                    {% with notlazy=True %}{% render_product product %}{% endwith %}
                    {% endif %}
                </div>
                {% endfor %}
                {% else %}
                <div class="col-12 py-lg-5 text-center">
                    <h2>{% trans "No results" %}</h2>
                </div>
                {% endif %}
            </div>

            {% block category_bottom %}
                {{ block.super }}
            {% endblock %}

            {% include "oscar/partials/pagination.html" %}
        {% endblock %}
    </div>
</div>
{% endblock %}