{% extends 'base.html' %}
{% block content %}
<section class="pt-4 pb-4 bg-light">
  <div class="container">
    <header class="mb-3 d-flex justify-content-between align-items-center">
      <h4 class="section-title text-white bg-primary py-2 px-3 rounded">All Discounted Products</h4>
    </header>

    <div class="row g-3">
      {% for product in discounted_products %}
        <div class="col-6 col-sm-4 col-md-3 position-relative">
          <div class="card h-100 shadow-sm border-0 product-card">
            <a href="{{ product.get_url }}" class="img-wrap d-block bg-white p-3 position-relative" style="height: 200px; overflow: hidden;">
              <img src="{{ product.images.url }}" class="img-fluid h-100" style="object-fit: contain;" alt="{{ product.product_name }}">
              {% if product.discount_percent %}
                <span class="position-absolute top-0 start-0 badge bg-danger m-2 shadow">
                  -{{ product.discount_percent }}% OFF
                </span>
              {% endif %}
            </a>

            <div class="card-body d-flex flex-column text-center">
              <h6 class="card-title mb-1 fw-semibold">
                <a href="{{ product.get_url }}" class="text-decoration-none text-dark">{{ product.product_name }}</a>
              </h6>

              {% if product.discounted_price and product.discounted_price < product.price %}
                <p class="text-danger fw-bold mb-1">
                  <del>${{ product.price }}</del> ${{ product.discounted_price }}
                </p>
              {% else %}
                <p class="text-success fw-bold mb-1">${{ product.price }}</p>
              {% endif %}

              <a href="{{ product.get_url }}" class="btn btn-outline-primary btn-sm mt-auto">View Details</a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}