{% load i18n %}
<form action="" hx-post="{% url 'web:add_cart_item' %}" hx-swap="none">
  {% csrf_token %}
  <input type="hidden" name="product" value="{{ product.pk }}">

  {% if product.has_variants %}
    <div class="mb-3">
      <label for="variant" class="sr-only">{% translate 'Variante' %}</label>
      <select class="select select-bordered {% if size == 'sm' %}select-sm{% endif %} w-full" id="variant" name="variant">
        {% for variant in product.variants.all %}
          <option value="{{ variant.pk }}" {% if not variant.stock %}disabled{% endif %}>
            {% for attribute_value in variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
            {% if not variant.stock %}({% translate 'agotado' %}){% endif %}
          </option>
        {% endfor %}
      </select>
    </div>
  {% endif %}

  <div class="flex items-center gap-2">
    <input class="input input-bordered {% if size == 'sm' %}input-sm w-16{% else %}w-20{% endif %} text-center" id="quantity" aria-label="{% translate 'Cantidad' %}" type="number" min="1" max="10" name="quantity" value="1">
    <button class="btn btn-primary {% if size == 'sm' %}btn-sm{% endif %} flex-1">
      {% include 'components/icons/add_cart.svg' %}
      {% if size == 'sm' %}{% translate 'Añadir' %}{% else %}{% translate 'Añadir al carrito' %}{% endif %}
    </button>
  </div>
</form>