{% extends "oscar/catalogue/browse.html" %}
{% load category_tags i18n ocyanjson ocyan_oscar %}
{% load basket_tags display_tags %}
{% load product_tags static %}

{% block header_title %}
    {{summary}}
{% endblock %}

{% block imports %}
    {{block.super}}
    <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/product.scss' %}">
    <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/category-browse.scss' %}">
    <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/category-description.scss' %}">
    <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/facets.scss' %}">
    <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/accordion.scss' %}">
{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb my-3 bg-light">
        <li class="breadcrumb-item">
            <a href="{% url 'wagtail_serve' '' %}">{% trans "Home" %}</a>
        </li>
        <li class="breadcrumb-item active">{{ summary }}</li>
    </ol>
{% endblock breadcrumbs %}

{% block header %}
    <div class="page-header action">
        <h1>{% block headertext %}{% endblock %}</h1>
    </div>
{% endblock %}

<!-- Alle producten geen categorieën tonen -->

{% block column_left %}
<div class="side_categories">
    <div id="accordion" class="side_bar">
        {{ block.super }}
    </div>
</div>
{% endblock %}

<!-- Column left -->
{% 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="accordion-header categories open-sm">
        <a class="collapse" data-toggle="collapse" data-target="#filter_categories" role="button" aria-expanded="false" aria-controls="filter_categories">
            <span class="h5">{% trans "Categories" %}</span>
        </a>
        <div class="collapse show reverse-md" id="filter_categories">
            <ul class="nav flex-column">
                {% for tree_category, info in tree_categories %}
                    {% if info.level < category_navigation_depth or tree_category|is_selected:category %}
                    <li class="nav-item {% if tree_category.pk == category.pk %}active{% endif %}">
                        <a class="nav-link text-dark" href="{{ tree_category.get_absolute_url }}">{% if tree_category.pk == category.pk %}<strong>{{ tree_category.name }}</strong>{% else %}{{ tree_category.name }}{% endif %}</a>
                        {% if info.level|add:1 == category_navigation_depth and tree_category|startswith:category %}
                        {% include "catalogue/partials/activetree.html" %}
                        {% endif %}
                    {% endif %}
                    {% if info.has_children %}<ul class="nav flex-column sub-nav">{% else %}</li>{% endif %}
                    {% for n in info.num_to_close %}
                        </ul></li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}
{% endblock %}

{% block facets %}
    {% if has_facets %}
        <div class="modal" id="facet_modal" tabindex="-1">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-header">
                        <span class="modal-title h5" >{% trans "Filters" %}</span>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    {% for field, data in facet_data.items %}
                        {% if data.results %}
                            {% include 'search/partials/facet.html' with name=data.name items=data.results %}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-primary facet_modal_toggler" data-toggle="modal" data-target="#facet_modal">
            {% blocktrans with count=paginator.count %}Filter {{ count }} results{% endblocktrans%}
        </button>
    {% endif %}
{% endblock %}

{% block content %}
    {% block category_blocks %}
        {% ocyanjson "oscar" "show_child_category_blocks" False as show_child_category_blocks %}
        {% if show_child_category_blocks and category.depth < 2 and category.has_children %}
            {% include 'catalogue/partials/category_blocks.html' %}
        {% endif %}
    {% endblock %}
    <form method="get" class="form-horizontal m-0 mb-3 w-100 text-muted">
        {# Render other search params as hidden inputs #}
        {% for value in search_form.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 paginator.count %}
            <div class="row search_results_wrapper mt-md-4 mt-0 mt-xl-0">
                <div class="search_filters col-12 col-sm-6">
                    {% if search_form.has_items_per_page_choices %}{% include "partials/form_field.html" with field=search_form.items_per_page %}{% endif %}
                    {% include "partials/form_field.html" with field=search_form.sort_by %}
                </div>
                <div class="col-12 col-sm-6 search_results">
                {% if paginator.num_pages > 1 %}
                {% blocktrans with start=page.start_index end=page.end_index num_results=paginator.count %}
                    Found <strong>{{ num_results }}</strong> results, showing <strong>{{ start }}</strong> to <strong>{{ end }}</strong>.
                {% endblocktrans %}
                {% else %}
                {% blocktrans count num_results=paginator.count %}
                    Found <strong>{{ num_results }}</strong> result.
                {% plural %}
                    Found <strong>{{ num_results }}</strong> results.
                {% endblocktrans %}
                {% endif %}
                </div>
            </div>
        {% else %}
            <p>
                {% trans "<strong>0</strong> results." %}
            </p>
        {% endif %}
    </form>

    {% if products %}
        <section class="mb-5">
            <div>
                <div class="row justify-products">
                    {% for product in products %}
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 mb-3">{% render_product product %}</div>
                    {% endfor %}
                </div>
                {% include "partials/pagination.html" %}
            </div>
        </section>
    {% else %}
        <p class="nonefound">{% trans "No products found." %}</p>
    {% endif %}

{% endblock content %}