{% if product.images|length > 0 %}
  {% set images = product.images %}
  {% set firstImage = images.first %}
  {% set original_path = firstImage.path|imagine_filter('sylius_shop_product_original') %}
  {% set path = firstImage.path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
{% else %}
  {% set original_path = '//placehold.it/400x300' %}
  {% set path = original_path %}
{% endif %}

{{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}

<div class="d-flex mb-3 mb-md-0">
  <!-- Thumbnails (visible on lg+) -->
  <div class="swiper swiper-load swiper-thumbs d-none d-lg-block w-100 me-xl-3" id="thumbs" data-swiper='{
         "direction": "vertical",
         "spaceBetween": 12,
         "slidesPerView": 4,
         "watchSlidesProgress": true
       }' style="max-width: 96px; height: 420px; overflow: hidden;">
    <div class="swiper-wrapper flex-column">
      {% for image in product.images %}
        {% set thumbPath = image.path|imagine_filter('sylius_shop_product_thumbnail') %}
        <div class="swiper-slide swiper-thumb" style="height: 96px; margin-bottom: 12px;">
          <div style="width: 94px; aspect-ratio: 1 / 1; overflow: hidden;">
            <img 
              src="{{ thumbPath }}" 
              alt="Thumbnail"
              loading="lazy"
              style="width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem;">
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

  <!-- Main slider -->
  <div class="swiper w-100 ms-md-2 " data-swiper='{
         "loop": false,
         "thumbs": { "swiper": "#thumbs" },
         "pagination": {
           "el": ".swiper-pagination",
           "clickable": true
         }
       }'>
    <div class="swiper-wrapper">
      {% for image in product.images %}
        {% set largePath = image.path|imagine_filter('sylius_shop_product_large_thumbnail') %}
        {% set originalPath = image.path|imagine_filter('sylius_shop_product_original') %}
        <div class="swiper-slide">
          <a href="{{ originalPath }}" data-glightbox data-gallery="product-gallery" class="d-block cursor-zoom-in">
            <div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0.5rem;">
              <img 
                src="{{ largePath }}" 
                alt="{{ product.name }}" 
                {% if not loop.first %}loading="lazy"{% endif %}
                style="width: 100%; height: 100%; object-fit: cover;">
            </div>
          </a>
        </div>
      {% endfor %}
    </div>
    <!-- Pagination (bullets) visible only on small screens -->
    <div class="swiper-pagination d-lg-none"> </div>
  </div>

</div>