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


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

{% block body %}
<div class="container text-center mt-2 mb-2">

    {% if categories %}
    <div class="dropdown d-lg-none mb-3">
        <a class="btn btn-outline-dark btn-sm dropdown-toggle w-50" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Products
        </a>
        <ul class="dropdown-menu w-50" style="max-height: 300px; overflow-y: scroll;">
            <li><a class="dropdown-item" href="{% url 'store:homepage' %}">All</a></li>
            {% for category in categories %}
            <li><a class="dropdown-item" href="{% url 'store:products_by_category' category.slug %}">{{category.title}}</a></li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if products %}
    {% include 'store/includes/products.html' with products=products %}
    <div>{% include 'store/pagination.html' with page_obj=products %}</div>
    {% else %}
    <span class="badge position-fixed top-50 start-50 translate-middle bg-dark text-white fs-4 rounded-pill">Comming Soon...</span>
    {% endif %}

</div>
{% include 'store/modals/homepage.html' %}
{% endblock %}

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