{% load currency_filters i18n_filters i18n static %}
{% for product in products %}
<div class="col-6 col-md-6 col-lg-4 col-xl-3">
    <div class="card product-card h-100 shadow-lg border-5 border-danger border-opacity-25 p-2 p-md-3 rounded-4">        
        <!-- Image -->
        <div class="position-relative overflow-hidden" style="height: 200px;">
            {% if product.images.all %}
                <img src="{{ product.images.first.image.url }}" 
                     class="card-img-top product-image w-100"
                     alt="{{ product|translate_model_field:'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 w-100"
                     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 %}

            <!-- Wishlist Button (Top Right) -->
            <div class="position-absolute top-0 end-0 m-2 z-index-10">
                <button onclick="toggleWishlist({{ product.id }}, this)" 
                        class="btn btn-sm btn-light rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 36px; height: 36px; border-radius: 50%;">
                    <i class="fas fa-heart text-danger" id="wishlist-icon-{{ product.id }}" style="font-size: 16px;"></i>
                </button>
            </div>

            <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 px-2 px-md-3 py-2">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <h6 class="card-title mb-0 flex-grow-1 text-truncate" style="font-size: 0.9rem;"> {{ product.name }} </h6>
                {% if product.allow_customer_offer %}
                    <span class="badge bg-warning text-dark ms-1" style="font-size: 0.7rem;">Offer</span>
                {% endif %}
            </div>

            <!-- Price with Discount -->
            {% with discount=product.get_active_discount %}
                {% if discount %}
                    <div class="pricing mb-2">
                        <span class="product-price original-price text-muted text-decoration-line-through" data-price="{{ product.price }}" style="font-size: 0.85rem;">
                            {{ currency_symbol }}{{ product.price|convert_currency:currency_rate|floatformat:2 }}
                        </span>
                        <span class="product-price discounted-price text-success fw-bold" data-price="{{ product.get_discounted_price }}" style="font-size: 1rem;">
                            {{ currency_symbol }}{{ product.get_discounted_price|convert_currency:currency_rate|floatformat:2 }}
                        </span>
                        <small class="product-price text-danger fw-bold d-block" data-price="{{ product.get_discount_amount }}" style="font-size: 0.8rem;">
                            Save {{ currency_symbol }}{{ product.get_discount_amount|convert_currency:currency_rate|floatformat:2 }}
                        </small>
                    </div>
                {% else %}
                <div class="d-flex flex-sm-row gap-2">
                    <p class="text-success fw-bold mb-2" style="font-size: 1rem;">
                         <span class="product-price" data-price="{{ product.price }}">
                            {{ currency_symbol }}{% load currency_filters %}{{ product.price|convert_currency:currency_rate|floatformat:2 }}
                        </span>  
                    </p>
                    
                </div>
                    
                   
                {% endif %}
            {% endwith %}
            <!-- Stats -->
            <div class="d-flex justify-content-between small text-muted mb-2" style="font-size: 0.8rem;">
                <span><i class="fas fa-box"></i> {{ product.stock }}</span>
                <span><i class="fas fa-shopping-bag"></i> {{ product.quantity_sold|default:0 }}</span>
            </div>

            <!-- Like -->
            <div class="d-flex gap-2 mb-2">
                <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 }}" style="font-size: 0.8rem;">{{ product.likes|default:0 }}</span>
                </button>
            </div>

            <div class="mt-auto">
                <a href="{% url 'shop:product_detail' product.slug %}" 
                   class="btn btn-outline-primary w-100 mb-2" style="font-size: 0.9rem;">View Details</a>
                {% comment %} {% if product.allow_customer_offer %}
                    <a href="{% url 'shop:product_detail' product.slug %}#offer-section" 
                       class="btn btn-outline-warning w-100 mb-2" style="font-size: 0.9rem;">
                        <i class="fas fa-handshake"></i> Offer
                    </a>
                {% endif %} {% endcomment %}
                <button hx-post="{% url 'shop:add_to_cart' product.id %}" 
                        hx-target="#cart-count"
                        hx-swap="outerHTML"
                        class="btn btn-success w-100 mb-2" style="font-size: 0.9rem;">
                    <i class="fas fa-cart-plus"></i> Cart
                </button>
                {% comment %} <div class="d-flex flex-wrap gap-1">
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.scheme }}://{{ request.get_host }}{% url 'shop:product_detail' product.slug %}" target="_blank" class="btn btn-outline-primary btn-sm flex-grow-1" title="Share on Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="https://twitter.com/intent/tweet?text={{ product.name|urlencode }}&url={{ request.scheme }}://{{ request.get_host }}{% url 'shop:product_detail' product.slug %}" target="_blank" class="btn btn-outline-info btn-sm flex-grow-1" title="Share on Twitter">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="https://api.whatsapp.com/send?text={{ product.name|urlencode }}%20-%20{{ request.scheme }}://{{ request.get_host }}{% url 'shop:product_detail' product.slug %}" target="_blank" class="btn btn-outline-success btn-sm flex-grow-1" title="Share on WhatsApp">
                        <i class="fab fa-whatsapp"></i>
                    </a>
                    <button type="button" class="btn btn-outline-secondary btn-sm flex-grow-1" onclick="copyShareLink('{{ request.scheme }}://{{ request.get_host }}{% url 'shop:product_detail' product.slug }}')" title="Copy product link">
                        <i class="fas fa-link"></i>
                    </button>
                </div> {% endcomment %}
            </div>
        </div>
    </div>
</div>
 {% endfor %}
           

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