{% load static %}

{% if products %}
<div class="shop-lisiting row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
    {% for product in products %}
    <div class="col">
        <article class="product type-product panel">
            <div class="vstack gap-2">
                <!-- Image -->
                <div class="panel">
                    <div class="ratio ratio-3x4 rounded overflow-hidden uc-transition-toggle">
                        <a href="{% url 'product_details' product.id %}">
                            <img class="media-cover image uc-transition-scale-up uc-transition-opaque"
                                src="{% static 'assets/images/common/' %}{{ product.image|default:'default.jpg' }}"
                                alt="{{ product.name|default:'Deleted Product' }}">
                        </a>
                    </div>
                    <span class="position-absolute top-0 start-0 m-2 bg-yellow-400 text-dark px-1 h-24px">67%</span>
                </div>

                <!-- Info -->
                <div class="content vstack items-center gap-1 text-center">
                    <h5 class="m-0">
                        <a class="text-none" href="{% url 'product_details' product.id %}">
                            {{ product.name|default:'Deleted Product' }}
                        </a>
                    </h5>

                    <ul class="nav-x gap-0 text-gray-100 dark:text-gray-700">
                        {% for i in "12345" %}
                        <li><i class="icon fs-6 unicon-star-filled text-secondary"></i></li>
                        {% endfor %}
                    </ul>

                    <span class="badge bg-primary text-white">{{ product.quantity }}</span>

                    <div class="hstack justify-center gap-narrow fs-7">
                        <span class="price product-price" data-id="{{ product.id }}">
    {% if product.currency == "INR" %}₹
    {% elif product.currency == "USD" %}$
    {% elif product.currency == "EUR" %}€
    {% elif product.currency == "JPY" %}¥
    {% else %}{{ product.currency }}
    {% endif %}
    {{ product.price }}
</span>
                    </div>
                </div>
            </div>
        </article>
    </div>
    {% endfor %}
</div>
{% else %}
<p class="error">No products found.</p>
{% endif %}