{#
/**
 * @file
 * Custom "Add to Cart" form template for Commerce Product Variations.
 */
#}

<form{{ attributes.addClass('product-add-to-cart') }}>

  {# Render atributos visualmente como botones #}
  {% if form.attributes %}
    <div class="product-attributes mb-3">

      {% for name, field in form.attributes %}
        {% if name != '#type' and name != '#title' %}
          <fieldset class="attribute attribute--{{ name|clean_class }}">
            <legend class="attribute-label">{{ field['#title'] }}</legend>

            <div class="attribute-options d-flex gap-2 flex-wrap">
              {% for key, option in field %}
                {% if key is not starting with '#' %}
                  <label class="attribute-option-label">
                    {{ option }}
                    {% if name == 'colors' %}
                      {# Visual swatch color #}
                      <span class="swatch swatch--{{ key|clean_class }}"></span>
                    {% else %}
                      {# Número o texto para talla #}
                      <span class="text">{{ key }}</span>
                    {% endif %}
                  </label>
                {% endif %}
              {% endfor %}
            </div>
          </fieldset>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}

  {# Render cantidad #}
  <div class="product-quantity mb-3">
    {{ form.quantity }}
  </div>

  {# Botón de Añadir a la cesta #}
  <div class="add-to-cart">
    {{ form.actions }}
  </div>

  {{ form.form_build_id }}
  {{ form.form_id }}
  {{ form.commerce_order_item_add_to_cart_form }}
</form>
