{% trans_default_domain 'products' %}
<div {{ attributes }}>
   <div class="variations-header">
      <p class="title-default">{{ this.label }}</p>
   </div>
   <div>
      {% for variation in this.variations %}
         {% if (this.isHidden and not variation.soldOut) or not this.isHidden or this.allSoldout %}
            <div class="cell-container">
               <input
                     type="radio"
                     name="variation[{{ this.id_product }}]"
                     value="{{ variation.id }}"
                     id="variation_{{ variation.id }}"
                     data-id-variation="{{ variation.id }}"
                     {{ stimulus_action('product-variations', 'selectVariation', 'click', {
                        id_variation: variation.id,
                     }) }}
                     {% if this.variations|length == 1 %} checked{% endif %}
                     {{ stimulus_target('product-variations', 'variationItemInput') }}
               >
               <label for="variation_{{ variation.id }}">
                  <span>
                     <span class="title">{{ this.customTitle(variation.id)|raw }}</span>
                     <twig:Product:DeliveryTime id_product="{{ this.id_product }}" id_variation="{{ variation.id }}" show_deliveries_info="{{ false }}" />
                  </span>
                  <span>
                     {% if variation.code is not empty %}
                        <span class="data">{{ 'variations.code'|trans }}: {{ variation.code }}</span>
                     {% endif %}
                     {% if variation.ean is not empty %}
                        <span class="data">{{ 'variations.ean'|trans }}: {{ variation.ean }}</span>
                     {% endif %}
                     <span class="price">{{ variation.price|formatPrice }}</span>
                  </span>
               </label>
            </div>
         {% endif %}
      {% endfor %}
   </div>
   {% if not this.allInStore and not this.allSoldout %}
      <button type="button"{% if not this.isHidden %} class="active"{% endif %} data-action="live#action" data-live-action-param="toggleAction"><twig:ux:icon name="caret-down" class="c-icon"/> {{ this.toggleText }}</button>
   {% endif %}
</div>
