{% extends "base.html" %}
{% load humanize %}
{% load static %}

{% block title %}Catálogo · AloeMarket{% endblock %}

{% block content %}
<section class="py-4">
  <div class="container">

    <!-- Título y descripción -->
    <div class="row mb-4">
      <div class="col-12" data-aos="fade-down">
        <h1 class="h3 fw-bold mb-2">Catálogo de productos (demo)</h1>
        <p class="text-muted mb-0">
          Esta es una vista de ejemplo para mostrar el diseño del catálogo de AloeMarket.
          Más adelante estos productos se cargarán desde la base de datos con imágenes y stock real.
        </p>
      </div>
    </div>

    <!-- Grid de productos -->
    <div class="row g-4">
      {% for product in products %}
        <div class="col-12 col-sm-6 col-md-4"
             data-aos="fade-up"
             data-aos-delay="{{ forloop.counter0|add:'0' }}00">

          <div class="card h-100 shadow-sm border-0 product-card">

            <!-- Imagen (a futuro se reemplaza por product.image.url) -->
            {% if product.image %}
              <div class="ratio ratio-4x3">
                <img src="{% static product.image %}"
                    class="img-fluid w-100 h-100"
                    style="object-fit: cover;"
                    alt="{{ product.name }}">
              </div>
            {% else %}
              <div class="ratio ratio-4x3 placeholder-img d-flex align-items-center justify-content-center">
                Imagen producto
              </div>
            {% endif %}

            <div class="card-body d-flex flex-column">

              <div class="d-flex justify-content-between align-items-start mb-1">
                <h2 class="h6 mb-0">{{ product.name }}</h2>
                {% if product.badge %}
                  <span class="badge bg-primary ms-2">{{ product.badge }}</span>
                {% endif %}
              </div>

              <p class="text-muted small mb-1">{{ product.category }}</p>

              <p class="fw-bold mb-1">
                ${{ product.price|floatformat:0|intcomma }}
              </p>

              <p class="text-muted small mb-3">
                SKU: {{ product.sku }}
              </p>

              <!-- BOTÓN AGREGAR AL CARRITO (funcional) -->
              <div class="mt-auto">

                <form action="{% url 'cart:add' %}"
                      method="post"
                      class="w-100 js-add-to-cart-form">
                  {% csrf_token %}
                  <input type="hidden" name="sku" value="{{ product.sku }}">
                  <input type="hidden" name="name" value="{{ product.name }}">
                  <input type="hidden" name="price" value="{{ product.price }}">
                  <button type="submit" class="btn btn-sm btn-primary w-100">
                    🛒 Agregar al carrito
                  </button>
                </form>


              </div>

            </div> <!-- END card-body -->

          </div> <!-- END card -->

        </div>
      {% empty %}
        <div class="col-12">
          <p class="text-muted">No hay productos para mostrar.</p>
        </div>
      {% endfor %}
    </div>

    <!-- Nota de estado -->
    <div class="row mt-4">
      <div class="col-12" data-aos="fade-up">
        <div class="alert alert-info small mb-0">
          <strong>Nota:</strong> Esta es una versión de demostración.
          En las siguientes etapas se conectará este catálogo a los modelos de productos
          con imágenes, categorías, stock e inventario real.
        </div>
      </div>
    </div>

  </div>
</section>
{% endblock %}