{% extends 'base.html' %}
{% load i18n %}
{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold">{{ category.name }}</h1>
            <p class="text-muted">{{ category.products.count }} products found</p>
        </div>
        <a href="{% url 'shop:category_list' %}" class="btn btn-outline-secondary">
            ← All Categories
        </a>
    </div>

    <div class="row g-4" id="product-grid">
        {% 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">
                <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 %}
                </div>

                <div class="card-body d-flex flex-column">
                    <h5 class="card-title">{{ product.name }}</h5>
                    
                    <!-- Price with Discount -->
                    {% with discount=product.get_active_discount %}
                    {% if discount %}
                        <div class="mb-3">
                            <span class="original-price text-muted text-decoration-line-through">
                                ${{ product.price|floatformat:2 }}
                            </span>
                            <br>
                            <span class="discounted-price text-success fw-bold">
                                ${{ product.get_discounted_price|floatformat:2 }}
                            </span>
                            <small class="text-danger d-block">
                                Save ${{ product.get_discount_amount|floatformat:2 }} ({{ discount.discount_percentage }}% off)
                            </small>
                        </div>
                    {% else %}
                        <p class="text-success fw-bold mb-3">${{ product.price|floatformat:2 }}</p>
                    {% endif %}
                    {% endwith %}

                    <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>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <p class="text-muted">No products found in this category yet.</p>
            <a href="{% url 'shop:create_product' %}" class="btn btn-primary">Create Product</a>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}