{% trans_default_domain 'products' %}
<div {{ attributes }}>
   <div class="variations-header">
      <p class="title-default">{{ this.label }}</p>
   </div>
   <div {% if this.labelsCount > 1 %} class="large" {% endif %}>
      {% for variation in this.variations %}
         <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 }}" {% if variation.soldout %} class="soldout" {% endif %}>
               <span class="variation-title">{{ this.customTitle(variation.id)|raw }}</span>
            </label>
         </div>
      {% endfor %}
   </div>
</div>
