{% extends 'store/layout/layout.html' %}
{% load static %}


{% block title %}Products{% endblock %}
{% block style %}{% endblock %}


{% block body %}
<div class="container-fluid text-center px-4">
    {% if products %}
        <form  method="get" action="{% url 'store:search' %}">
            <input name="q" hidden value="{{search_query}}">
            <div class="input-group input-group-sm mb-3">
                <a role="button" type="button" class="btn btn-outline-dark" type="button" href="{% url 'store:search' %}?q={{search_query}}">Clear</a>
                <select class="form-select form-select-sm toDisable" name="sort" id="filterSortItemsOffcanvas" value="{{search_filter_query}}">
                    {% if search_filter_query %}
                        <option selected value="{{search_filter_query.value}}">{{search_filter_query.display}}</option>
                    {% else %}
                        <option disabled selected value="">Sort</option>
                    {% endif %}
                    <option value="a-z">A - Z</option>
                    <option value="z-a">Z - A</option>
                    <option value="price-asc">Price (Low to High)</option>
                    <option value="price-desc">Price (High to Low)</option>
                </select>
                <button class="btn btn-outline-dark" type="submit">Filter</button>
            </div>
        </form>
        {% include "store/includes/products.html" with products=products %}
        {% include "store/includes/pagination.html" with page_obj=products search_query=search_query %}
    {% else %}
        <span class="badge position-fixed start-50 top-50 translate-middle rounded-pill bg-dark text-white fs-5">
            Results
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">0</span>
        </span>
    {% endif %}
</div>
{% endblock %}


{% block script %}
<script src="{% static 'store/js/homepage.js' %}"></script>
{% endblock %}