{% extends "navfoot.html" %}
{% block content %}
{% load static %}
    <h1>Products in {{ category.name }}</h1>
    <p>{{ category.description }}</p>
    <div class="row">
        {% for product in products %}
            <div class="col-md-4 mb-4">
                <div class="card h-60">
                    {% if product.image %}
                        <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="card-text text-muted">{{ product.description|slice:":100" }}{% if product.description|length > 100 %}...{% endif %}</p>
                        <a href="{% url 'product_detail' product.id %}" class="btn btn-primary">Voir plus de détails</a>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="col-12">
                <p class="text-center">No products available in this category.</p>
            </div>
        {% endfor %}
    </div>
    <a class="btn btn-outline-danger" href="{% url 'products' %}">Retour à les catégories</a>

{% endblock %}