{% extends "oscar/search/results.html" %}

{% load currency_filters %}
{% load thumbnail %}
{% load product_tags %}
{% load wagtailcore_tags wagtailsearchpromotions_tags %}
{% load i18n %}
{% load static %}

{% 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>
        {% if has_facets %}
        <div id="accordion" class="side_categories">
            {% 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>
    {% endif %}
    </div>
</div>

{% endblock %}

{% block column_left_class %}
{% if not has_facets %}
d-none
{% else %}
{{ block.super }}
{% endif %}
{% endblock %}
{% block column_right_class %}
{% if not has_facets %}
col-12
{% else %}
{{ block.super }}
{% endif %}
{% endblock %}

{% block headertext %}
"{{ query }}"
<a class="btn btn-primary btn-filter" data-bs-toggle="collapse" data-bs-target="#column-left" aria-label="Filter">
    <i class="fa fa-cog-solid"></i>
    {% trans "Filter" %}
{% blocktrans count num_results=paginator.count %}<strong>{{ num_results }}</strong> result.{% plural %}<strong>{{ num_results }}</strong> results.{% endblocktrans %}
</a>
{% endblock %}

{% block content %}
<form method="get">
    {# 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 }}" >
    {% get_search_promotions search_form.q.value as search_promotions %}

    {% if search_promotions %}
    <ul class="list-group mb-5" id="search_promotions">
        {% for search_promotion in search_promotions %}
        <li>
            <a href="{% pageurl search_promotion.page %}" class="text-dark">
                <span class="h4 mb-0 text-primary">{{ search_promotion.page.title }}</span>
                <small class="text-primary"><div class="search_badge border-primary">Voorgestelde pagina</div> {% if search_promotion.page.url %}<span class="promotion_url">{{ search_promotion.page.url }}</span>{% endif %}</small>
                <small class="small-lead">{{ search_promotion.description|truncatechars:250 }}</small>
            </a>
        </li>
        {% endfor %}
    </ul>
    {% endif %}

    {% if paginator.count %}
    <div class="row align-items-center form-results">
        <div class="col-md-12">
            <div class="paginator-wrapper">
                <div class="paginator-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 class="sortby-wrapper">
                    {% include "oscar/partials/form_field.html" with field=search_form.sort_by style='horizontal' %}
                </div>
            </div>
        </div>
        
    </div>
    {% else %}
    <p>
        {% trans "Found <strong>0</strong> results." %}
        {% if suggestion %}
        {% url 'search:search' as search_url %}
{% blocktrans %}Did you mean <a href="{{ search_url }}?q={{ suggestion }}">"{{ suggestion }}"</a>?{% endblocktrans %}
        {% endif %}
    </p>
    {% endif %}
</form>

{% if page.object_list %}
<section class="products-wrapper">
    <div class="row products">
        {% for result in page.object_list %}
        <div class="col-6 col-lg-4 col-xl-4">{% render_product result.object %}</div>
        {% endfor %}
    </div>
    {% include "oscar/partials/pagination.html" with page_obj=page %}
</section>
{% endif %}

{% endblock %}

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