{% extends "master.html" %}
{% load static %}

{% block title %}
Product
{% endblock%}

{% block content %}
<div class="container-lg text-center my-3 p-3 rounded-1" style="background-color: rgb(206, 221, 240);">
    <div class="row row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-1 g-4">

        {% for product in products %}
        <div class="col">
            <div class="card">
                {% if product.images.first %}
                    <img src="{{ product.images.first.image.url }}" class="card-img-top" alt="{{ product.images.first.title }}">
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{product.name}}</h5>
                    <p class="card-text">{{product.description|safe}}</p>
                </div>
                <div class="card-footer">
                    <small class="text-body-secondary"><a href="{% url 'product:product-details' product.pk %}" class="btn btn-info">Details</a></small>
                    <hr>
                    <small class="text-body-secondary">in stock: {{product.stock}}</small>
                    <hr>
                    <small class="text-body-secondary">Price: {{product.price}}$</small>
                    <hr>
                    <small class="text-body"><a href="{% url 'shopping_basket:add_to_cart' product.id%}"
                            class="btn btn-success">Add to
                            cart</a></small>
                </div>
            </div>
        </div>
        {% endfor %}

    </div>
</div>

{% endblock %}