{% extends 'layouts/base.html' %}
{% load i18n %}
{% load pyaa %}
{% load pyaa_format %}

{% block content %}

<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-center mb-6">
        {% translate "title.shop-products.index" %}
    </h1>

    {% if page_obj %}
    <div class="flex flex-wrap justify-center gap-4">
        {% for product in page_obj %}
        <a href="{% url 'shop_product_details' product.token product.slug %}" class="block w-full max-w-xs bg-base-200 rounded-lg overflow-hidden hover:opacity-80 transition-opacity">
            <img src="{{ product.get_image_url }}" alt="{{ product.name }}" class="w-full aspect-[16/9] object-cover">
            <div class="p-4 text-center">
                <h2 class="font-semibold mb-1">{{ product.name }}</h2>
                {% if product.description %}
                <p class="text-sm text-base-content/60 mb-2 line-clamp-2">
                    {{ product.description|striptags|truncatewords:10 }}
                </p>
                {% endif %}
                <p class="text-lg font-bold text-primary">{{ product.price|format_currency:product.currency }}</p>
            </div>
        </a>
        {% endfor %}
    </div>

    {% include 'partials/paginator.html' %}
    {% else %}
    {% include 'partials/empty_data.html' %}
    {% endif %}
</div>

{% endblock content %}