{% trans_default_domain 'products' %}
<div {{ attributes.defaults(stimulus_controller(this.shortName), {class: (this.isOld ? 'soldout')}) }} data-gallery-wrapper>
   {% if this.photos %}
      {% if this.show_labels %}
         <div class="gallery-labels">
            <twig:Product:Labels id_product="{{ this.id_product }}" visibility="detail"/>
         </div>
      {% endif %}
      <div class="slider-tns" {{ stimulus_target(this.shortName, 'container') }}>
         {% for photo in this.photos %}
            <div class="main-photo" {{ stimulus_target(this.shortName, 'slides') }} data-id="{{ photo.thumbnail.id }}" data-slide-index="{{ loop.index0 }}">
               {% if photo.id_video %}
                  <a
                        href="{{ this.fetchVideoLargeUrl(photo.id_video) }}"
                        data-rel="gallery"
                        data-type="video"
                        data-pswp-thumb="{{ this.fetchThumbnailUrl(photo.thumbnail) }}"
                        {{ stimulus_target(this.shortName, 'link') }}>
                     <twig:Video id_video="{{ photo.id_video }}"/>
                     <span><twig:ux:icon name="search" class="c-icon"/></span>
                  </a>
               {% else %}
                  <a
                        href="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}"
                        data-id="{{ photo.thumbnail.id }}"
                        data-pswp-thumb="{{ this.fetchThumbnailUrl(photo.thumbnail) }}"
                        data-rel="gallery"
                        {{ stimulus_target(this.shortName, 'link mainPhoto') }}>
                     <twig:Picture img_class="{{ this.pictureClass }}" thumbnail="{{ photo.thumbnail }}" type="product_detail"
                                   alt="{{ photo.thumbnail.title }}"></twig:Picture>
                     <span><twig:ux:icon name="search" class="c-icon"/></span>
                  </a>
               {% endif %}
               {% if this.isOld %}
                  <p class="soldout-label">{{ 'product.canceled'|trans }}</p>
               {% endif %}
            </div>
         {% endfor %}
      </div>

      <div class="tns-controls" {{ stimulus_target(this.shortName, 'controls') }}>
         <button class="btn" aria-label="{{ 'slider.slide.prev'|trans }}">
            <twig:ux:icon name="{{ this.arrows[0] }}"/>
         </button>
         <button class="btn" aria-label="{{ 'slider.slide.next'|trans }}">
            <twig:ux:icon name="{{ this.arrows[1] }}"/>
         </button>
      </div>

      {% if this.photos|length > 1 %}
         <div class="gallery-photos">
            {% set visible_photos = this.visiblePhotosCount %}
            {% set hidden_photos = this.photos[visible_photos:] %}

            {% for index, photo in this.photos[0:visible_photos] %}
               <div>
                  <a
                        href="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}"
                        data-id="{{ photo.thumbnail.id }}"
                        data-pswp-thumb="{{ this.fetchThumbnailUrl(photo.thumbnail) }}"
                        data-variations="{{ photo.variations }}"
                        {{ stimulus_target(this.shortName, 'link photo') }}>
                     <twig:Picture class="img-responsive" thumbnail="{{ photo.thumbnail }}" type="product_gallery"
                                   alt="{{ photo.thumbnail.title }}"></twig:Picture>
                  </a>
               </div>
            {% endfor %}

            {% if hidden_photos|length == 1 %}
               {% set photo = hidden_photos[0] %}
               <div>
                  <a
                        href="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}"
                        data-id="{{ photo.thumbnail.id }}"
                        data-pswp-thumb="{{ this.fetchThumbnailUrl(photo.thumbnail) }}"
                        data-variations="{{ photo.variations }}"
                        {{ stimulus_target(this.shortName, 'link photo') }}>
                     <twig:Picture class="img-responsive" thumbnail="{{ photo.thumbnail }}" type="product_gallery"
                                   alt="{{ photo.thumbnail.title }}" />
                  </a>
               </div>

            {% elseif hidden_photos|length > 1 %}
               {% set photo = hidden_photos[0] %}
               <div class="more-photos">
                  <a href="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}" {{ stimulus_target(this.shortName, 'morePhotosLink') }} >
                     <twig:ux:icon name="image-placeholder" class="c-icon"/>
                     <span class="count">+{{ this.photos|length - visible_photos }} {{ 'photos.next'|trans }}</span>
                  </a>
               </div>
            {% endif %}

          {% for photo in this.photos[visible_photos:] %}
               <div class="hidden">
                  <a
                        href="{{ this.fetchThumbnailLargeUrl(photo.thumbnail) }}"
                        data-id="{{ photo.thumbnail.id }}"
                        data-pswp-thumb="{{ this.fetchThumbnailUrl(photo.thumbnail) }}"
                        data-variations="{{ photo.variations }}"
                        {{ stimulus_target(this.shortName, 'link photo') }}>
                     <twig:Picture class="img-responsive" thumbnail="{{ photo.thumbnail }}" type="product_gallery"
                                   alt="{{ photo.thumbnail.title }}"></twig:Picture>
                  </a>
               </div>
            {% endfor %}
         </div>
      {% endif %}
   {% else %}
      <div class="main-photo">
         <a>
            <twig:Picture class="img-responsive" type="product_detail"/>
         </a>
      </div>
   {% endif %}
</div>
