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

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

{% 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 %}
{% endblock %}

{% block header_title %}
    {{ query }}
{% endblock %}

{% block header_breadcrumbs %}
    <ul class="breadcrumb bg-light my-3">
        <li class="breadcrumb-item">
            <a class="active breadcrumb-link" href="{% url 'wagtail_serve' '' %}">{% trans "Home" %}</a>
        </li>
        <li class="breadcrumb-item">
            <a class="active breadcrumb-link">{% trans "Search" %}</a>
        </li>
        <li class="breadcrumb-item active">"{{ query }}"</li>
    </ul>
{% endblock %}

{% block column_left %}
    {% if has_facets %}
    <div class="sticky">
        <div id="accordion" class="side_categories">
            {% 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>
    {% endif %}
{% 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 }}"
{% 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 mt-md-4 mt-0 mt-xl-0">
                <div class="col-md-5">
                {% 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="d-block search_filters col-md-7">
                    {% include "partials/form_field.html" with field=search_form.sort_by %}
                </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="my-5">
            <div>
                <div class="row justify-products">
                    {% for result in page.object_list %}
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 mb-3">{% render_product result.object %}</div>
                    {% endfor %}
                </div>
                {% include "partials/pagination.html" with page_obj=page %}
            </div>
        </section>
    {% endif %}

{% endblock %}

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