{% trans_default_domain 'products' %}
<div {{ attributes.defaults({'data-id-label': this.id_label}) }}>
   <div>
      {% for value in this.fetchValues %}
         {% if (this.isHidden and value.inStore > 0) or not this.isHidden or this.allSoldout %}
            <input
                  type="radio"
                  name="variation[{{ this.id_label }}]"
                  value="{{ value.id }}"
                  id="variation_{{ value.id }}"
                  data-id-label="{{ this.id_label }}"
                  data-id-variation="{{ value.id }}"
                  {{ stimulus_action('product-variations', 'select', 'click', {
                     id_value: value.id,
                     id_label: this.id_label,
                  }) }}
                  {{ stimulus_target('product-variations', 'variationItemInput') }}
            >
            <label for="variation_{{ value.id }}">
               <div>
                  <span class="title">{{ value.title }}</span>
                  {% if this.labelsCount == 1 %}
                     <twig:Product:DeliveryTime:Availability id_product="{{ this.id_product }}" id_variation="{{ this.getIdVariation(value.id) }}"/>
                  {% endif %}
               </div>
               <div>
                   {% if value.code is not empty %}
                     <span class="data">{{ 'variations.code'|trans }}: {{ value.code }}</span>
                  {% endif %}
                  {% if value.ean is not empty %}
                     <span class="data">{{ 'variations.ean'|trans }}: {{ value.ean }}</span>
                  {% endif %}
               </div>
            </label>
         {% 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>
