{% for product in products %}
<div class="col-md-6 col-lg-4 col-xl-3">
    <div class="card product-card h-100 shadow-sm border-0">
        
        <!-- Image -->
        <div class="position-relative overflow-hidden" style="height: 240px;">
            {% if product.images.all %}
                <img src="{{ product.images.first.image.url }}" 
                     class="card-img-top product-image"
                     alt="{{ product.name }}"
                     onclick="openProductGallery({{ product.id }})"
                     style="height: 100%; object-fit: cover; cursor: pointer;">
            {% elif product.image %}
                <img src="{{ product.image.url }}" 
                     class="card-img-top product-image"
                     alt="{{ product.name }}"
                     onclick="openProductGallery({{ product.id }})"
                     style="height: 100%; object-fit: cover; cursor: pointer;">
            {% endif %}

            <!-- Discount Badge -->
            {% with discount=product.get_active_discount %}
                {% if discount %}
                    <div class="discount-badge">
                        {% if discount.discount_type == 'percentage' %}
                            <span class="discount-percent">{{ discount.discount_value }}% OFF</span>
                        {% else %}
                            <span class="discount-fixed">${{ discount.discount_value }} OFF</span>
                        {% endif %}
                    </div>
                {% endif %}
            {% endwith %}

            <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-40 d-flex align-items-center justify-content-center opacity-0 hover-overlay">
                <button onclick="openProductGallery({{ product.id }})" 
                        class="btn btn-light btn-sm">
                    <i class="fas fa-images"></i> View Gallery
                </button>
            </div>
        </div>

        <div class="card-body d-flex flex-column">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h5 class="card-title mb-0">{{ product.name }}</h5>
                {% if product.allow_customer_offer %}
                    <span class="badge bg-warning text-dark">Offer Price</span>
                {% endif %}
            </div>

            <!-- Price with Discount -->
            {% with discount=product.get_active_discount %}
                {% if discount %}
                    <div class="pricing mb-3">
                        <span class="original-price text-muted text-decoration-line-through">
                            {{ currency_symbol }}{{ product.price|floatformat:2 }}
                        </span>
                        <span class="discounted-price text-success fw-bold fs-5">
                            {{ currency_symbol }}{{ product.get_discounted_price|floatformat:2 }}
                        </span>
                        <small class="text-danger fw-bold">
                            Save {{ currency_symbol }}{{ product.get_discount_amount|floatformat:2 }}
                        </small>
                    </div>
                {% else %}
                    <p class="text-success fw-bold mb-3"> 
                        <span class="product-price" data-price="{{ product.price }}">
                            {{ currency_symbol }}{{ product.price|floatformat:2 }}
                        </span>  
                    </p>
                {% endif %}
            {% endwith %}

            <!-- Rating -->
            <div class="mb-2">
                <span class="text-warning">
                    {% for i in "12345" %}
                        <i class="fas fa-star{% if i|add:0 > product.average_rating %} text-muted{% endif %}"></i>
                    {% endfor %}
                </span>
                <small class="text-muted ms-1">({{ product.average_rating|floatformat:1 }}) • {{ product.rating_count }} reviews</small>
            </div>

            <!-- Stats -->
            <div class="d-flex justify-content-between small text-muted mb-3">
                <span><i class="fas fa-box"></i> {{ product.stock }} left</span>
                <span><i class="fas fa-shopping-bag"></i> {{ product.quantity_sold|default:0 }} sold</span>
            </div>

            <!-- Like & Wishlist -->
            <div class="d-flex gap-2 mb-3">
                <button onclick="toggleLike({{ product.id }}, this)" 
                        class="btn btn-sm btn-outline-danger flex-fill">
                    <i class="fas fa-heart" id="like-icon-{{ product.id }}"></i>
                    <span id="like-count-{{ product.id }}">{{ product.likes|default:0 }}</span>
                </button>
                <button onclick="toggleWishlist({{ product.id }}, this)" 
                        class="btn btn-sm btn-outline-warning flex-fill">
                    <i class="fas fa-bookmark" id="wishlist-icon-{{ product.id }}"></i>
                    <span id="wishlist-count-{{ product.id }}">{{ product.wishlist_count }}</span>
                </button>
            </div>

            <div class="mt-auto">
                <a href="{% url 'shop:product_detail' product.slug %}" 
                   class="btn btn-outline-primary w-100 mb-2">View Details</a>
                <button hx-post="{% url 'shop:add_to_cart' product.id %}" 
                        hx-target="#cart-count"
                        hx-swap="outerHTML"
                        class="btn btn-success w-100">
                    <i class="fas fa-cart-plus"></i> Add to Cart
                </button>
            </div>
        </div>
    </div>
    <!-- Rating -->
    <div class="mb-2">
        <span class="text-warning">
            {% for i in "12345" %}
                <i class="fas fa-star{% if i|add:0 > product.average_rating %} text-muted{% endif %}"></i>
            {% endfor %}
        </span>
        <small class="text-muted ms-1">({{ product.average_rating|floatformat:1 }}) • {{ product.rating_count }} reviews</small>
    </div>

    <!-- Stats -->
    <div class="d-flex justify-content-between small text-muted mb-3">
        <span><i class="fas fa-box"></i> {{ product.stock }} left</span>
        <span><i class="fas fa-shopping-bag"></i> {{ product.quantity_sold|default:0 }} sold</span>
    </div>

    <!-- Like & Wishlist -->
    <div class="d-flex gap-2 mb-3">
        <button onclick="toggleLike({{ product.id }}, this)" 
                class="btn btn-sm btn-outline-danger flex-fill">
            <i class="fas fa-heart" id="like-icon-{{ product.id }}"></i>
            <span id="like-count-{{ product.id }}">{{ product.likes|default:0 }}</span>
        </button>
        <button onclick="toggleWishlist({{ product.id }}, this)" 
                class="btn btn-sm btn-outline-warning flex-fill">
            <i class="fas fa-bookmark" id="wishlist-icon-{{ product.id }}"></i>
            <span id="wishlist-count-{{ product.id }}">{{ product.wishlist_count }}</span>
        </button>
    </div>

    <div class="mt-auto">
        <a href="{% url 'shop:product_detail' product.slug %}" 
            class="btn btn-outline-primary w-100 mb-2">View Details</a>
        <button hx-post="{% url 'shop:add_to_cart' product.id %}" 
                hx-target="#cart-count"
                hx-swap="outerHTML"
                class="btn btn-success w-100">
            <i class="fas fa-cart-plus"></i> Add to Cart
        </button>
    </div>

</div>
 {% endfor %}
           

<!-- Empty state when no products found -->
{% if not products %}
<div class="col-12 text-center py-5">
    <p class="text-muted">No products found matching your search.</p>
</div>
{% endif %}