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


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


{% block body %}
<div class="container-fluid">
    <div class="row" style="margin-bottom: 10px;">
        <div class="col-1 position-relative ps-sm-4 ps-1">
            <div class="position-fixed">
                <button class="btn btn-outline-dark btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
                    <i class="bi bi-funnel"></i>
                </button>
            </div>
        </div>
        <div class="col-11 pe-4">
            {% if products %}
                {% include "store/includes/products.html" with products=products %}
                {% include "store/includes/pagination.html" with page_obj=products filter_query=filter_query %}
            {% else %}
                <span class="badge position-fixed start-50 top-50 translate-middle rounded-pill bg-dark text-white fs-5">
                    Products
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">0</span>
                </span>
            {% endif %}
        </div>
    </div>
    {% include "store/includes/product_filter.html" with products=products categories=categories %}
</div>
{% endblock %}


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