{% extends "base.html" %}
{% block title %}Carrito · AloeMarket{% endblock %}
{% load humanize %}

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

    <div class="d-flex justify-content-between align-items-center mb-3">
      <h1 class="h4 mb-0">Carrito de compras</h1>
      <a href="{% url 'products:product_list' %}" class="btn btn-outline-secondary btn-sm">
        ⬅ Seguir viendo productos
      </a>
    </div>

    {% if items %}
      <div class="table-responsive mb-3">
        <table class="table align-middle">
          <thead class="table-light">
            <tr>
              <th>Producto</th>
              <th class="text-end">Precio</th>
              <th class="text-center">Cantidad</th>
              <th class="text-end">Subtotal</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for item in items %}
              <tr>
                <td>{{ item.name }}</td>
                <td class="text-end">${{ item.price|floatformat:0|intcomma }}</td>
                <td class="text-center">{{ item.qty }}</td>
                <td class="text-end">${{ item.subtotal|floatformat:0|intcomma }}</td>
                <td class="text-end">
                  <a href="{% url 'cart:remove' item.sku %}"
                     class="btn btn-sm btn-outline-danger">
                    Quitar
                  </a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr>
              <th colspan="3" class="text-end">Total</th>
              <th class="text-end">${{ total|floatformat:0|intcomma }}</th>
              <th></th>
            </tr>
          </tfoot>
        </table>
      </div>

      <div class="d-flex justify-content-between">
        <a href="{% url 'cart:clear' %}" class="btn btn-outline-danger btn-sm">
          Vaciar carrito
        </a>
        <button class="btn btn-success" disabled>
          Finalizar pedido (demo)
        </button>
      </div>
      <p class="text-muted small mt-2">
        * En esta versión demo el botón de finalizar pedido aún no está conectado.
      </p>
    {% else %}
      <div class="alert alert-info">
        Tu carrito está vacío. Agrega productos desde el catálogo.
      </div>
    {% endif %}

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