<div {{ attributes.defaults(stimulus_controller(this.shortName)) }}>
   <div class="product-variation-variations">
      {% for variation in this.variations %}
         {% if loop.index0 == (this.max_visible + 1) %}
            <div class="show-more-trigger" {{ stimulus_action(this.shortName, 'expandMore', 'click') }} {{ stimulus_target(this.shortName, 'showMore') }}>
               <div class="more-variations">
                  <twig:Picture class="img-responsive" thumbnail="{{ variation.thumbnail }}" type="product_gallery_thumb"/>
                  <span class="more-label">+{{ this.variations|length - this.max_visible }}</span>
               </div>
            </div>
         {% endif %}
         <div class="image variation-item {% if loop.index0 >= this.max_visible %}hidden-variation{% endif %}"
              {{ stimulus_target(this.shortName, 'variationItem') }}
               {{ stimulus_action(this.shortName, 'hover', 'mouseenter', {color: this.customTitle(variation.id)|raw})|stimulus_action(this.shortName, 'reset', 'mouseleave') }}>
            <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') }}
                  data-product-color="{{ this.customTitle(variation.id)|raw }}">
            <label for="variation_{{ variation.id }}" {% if variation.soldout %} class="soldout" {% endif %}>
               <twig:Picture class="img-responsive" thumbnail="{{ variation.thumbnail }}" type="product_gallery_thumb"/>
            </label>
         </div>
      {% endfor %}
   </div>

   <div class="product-variation-label">
      <p class="variation-label">{{ this.label }}:&nbsp;</p>
      <span id="product-color-label"
            class="product-color-label"
            data-original-color="{% if this.id_variation %}{{ this.customTitle(this.id_variation) }}{% endif %}"
            data-product-variations-cellphoto-target="label">
          {% if this.id_variation %}{{ this.customTitle(this.id_variation) }}{% endif %}
      </span>
   </div>
</div>
