{% load i18n %}
{% if cart.items.count == 0 %}
  <p class="text-sm text-base-content/70 py-2">{% translate 'No hay nada en el carrito' %}</p>
{% else %}
  <ul class="flex flex-col gap-3 max-h-80 overflow-y-auto">
    {% for cart_item in cart.items.all %}
      <li class="flex items-start gap-3 {% if not forloop.last %}pb-3 border-b border-base-300{% endif %}">
        <a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}" class="shrink-0">
          <img class="h-14 w-14 rounded-md object-cover bg-base-200" src="{{ cart_item.product.images.all.0.s.url }}" alt="{{ cart_item.product.name }}">
        </a>

        <div class="flex-1 min-w-0">
          <div class="flex">
            <a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
              class="text-sm font-semibold leading-snug hover:text-primary line-clamp-2">
              {{ cart_item.product.name }}
            </a>
            {% if cart_item.variant %}
              <p class="text-xs text-base-content/60">
                {% for attribute_value in cart_item.variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
              </p>
            {% endif %}
            <div class="flex items-center justify-between gap-2 mt-1">
              <span class="text-xs text-base-content/60 mx-2">{% translate 'x' %} {{ cart_item.quantity }}</span>
              <span class="text-sm font-bold">{{ cart_item.price.price_with_tax }} €</span>
            </div>
          </div>

          <form hx-post="{% url 'web:delete_cart_item' pk=cart_item.pk %}" hx-swap="none">
            {% csrf_token %}
            <button type="submit" class="btn btn-ghost btn-xs btn-circle text-error" aria-label="{% translate 'Quitar' %}">
              {% include 'components/icons/remove.svg' %}
            </button>
          </form>
        </div>
      </li>
    {% endfor %}
  </ul>

  <a href="{% url 'web:cart_detail' %}" class="btn btn-primary btn-sm w-full mt-4">
    {% translate 'Ver carrito' %}
  </a>
{% endif %}