{% trans_default_domain 'products' %}
<div {{ attributes.defaults({class: (this.isOld ? 'soldout'), 'data-controller': this.shortName}) }} data-gallery-wrapper>
   {% if this.photos %}
      <div class="main-photo">
         <a
               href="{{ this.fetchThumbnailLargeUrl(this.photos[0].thumbnail) }}"
               data-rel="gallery"
               data-pswp-thumb="{{ this.fetchThumbnailLargeUrl(this.photos[0].thumbnail) }}"
               data-id="{{ this.photos[0].thumbnail.id }}"
         >
            <twig:Picture class="img-fluid" thumbnail="{{ this.photos[0].thumbnail }}" type="product_detail"></twig:Picture>
         </a>
      </div>
      <div class="gallery-photos">
         {% for index, photo in this.photos[1:] %}
            {% if index == 3 and this.photos|length > 4 %}
               <div class="more-photos-wrap">
                  <a
                        class="more-photos"
                        href="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}"
                        data-pswp-thumb="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}"
                        data-rel="gallery"
                        data-id="{{ photo.thumbnail.id }}"
                        data-variations="{{ photo.variations }}"
                  >
                     <span class="hide-mobile" {{ stimulus_target(this.shortName, 'morePhotoText') }} >{{ 'product.photos.next-text'|trans }}</span>
                     <span class="hidden" {{ stimulus_target(this.shortName, 'morePhotoPicture') }}>
                         <twig:Picture class="img-responsive" thumbnail="{{ photo.thumbnail }}" is_lazy="{{ true }}"
                                   type="product_gallery"/>
                     </span>
                  </a>
               </div>
            {% else %}
               <div{{ index > 2 ? " class='hidden'" }}>
                  <a
                        href="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}"
                        data-pswp-thumb="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}"
                        data-rel="gallery"
                        data-id="{{ photo.thumbnail.id }}"
                        data-variations="{{ photo.variations }}">
                     <twig:Picture class="img-responsive" thumbnail="{{ photo.thumbnail }}" is_lazy="{{ true }}"
                                   type="product_gallery"></twig:Picture>
                  </a>
               </div>
            {% endif %}
         {% endfor %}
      </div>
   {% else %}
      <div class="main-photo">
         <a>
            <twig:Picture class="img-responsive" type="product_detail" />
         </a>
      </div>
   {% endif %}
</div>
