{% extends 'base.html' %}
{% load static %}
{% block metadescription %}
    {% if category %}
        {{ category.description|truncatewords:155 }}
    {% else %}
        Welcome to Mintmade Fashion where you can buys different items.....
    {% endif %}
{% endblock %}

{% block title %}
    {% if category %}
        {{ category.name }} - Mintmade Fasion
    {% else %}
        See our New Collections - Mintmade Fasion
    {% endif %}
{% endblock %}

{% block content %}
     {% if category %}
<div>
    <div class="row my_row_class">
        <div class="mx-auto">
        <p><a href="{% url 'shop:allProdCat' %}">Our Product Collection</a></p>
            </div>
    </div>
</div>
    {% endif %}
<div class="mx_auto">
    {% if category %}
        <img class="my_image" src="{{category.image.url}}" alt="{{category.name}}">
</div>
<br>
<div>
    <h1 class="text-center my_title">{{category.name}}</h1>
    <p class="text-justify">{{category.description}}</p>
</div>
    {% else %}
<div>
    <img class=" my_image my_image_padding" src="{% static 'img/banner.png' %}" alt="our products" style="height:300px;width:1100px">
</div>
<br>
<div>
    <h1 class="text-center my_title">Our Products Collections</h1>
    <p class="text-justify"></p>
</div>
    {% endif %}
<div class="container">
    <div class="row mx_auto">
        {% for product in products.object_list %}
        <div class="my_bottom_margin col-9 col-sm-12 col-md-4 col-md-12 col-lg-4">
            <div class="card text-center" style="min-width:18rem;">
                <a href="{{product.get_url}}"><img class="card-img-top my_image" src="{{product.image.url}}" alt="{{product.name}}"></a>
                <div class="card-body">
                    <h4>{{product.name}}</h4>
                    <p>{{product.price}}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="mx-auto">
        {% if products.paginator.num_pages > 1 %}
       <hr>
        <div class="text-center">
            {% for pg in products.paginator.page_range %}
            <a href="?page={{pg}}" class="btn btn-light btn-sm {% if products.number == pg %} active {% endif %}">{{pg}}</a>
            {% endfor %}
        </div>
     {% endif %}
    </div>
<br>
</div>
{% endblock %}