<div class="product-gallery product-gallery--{{ orientation }} flex flex-col w-full gap-4 lg:gap-6 {{ orientation in ['bottom', 'top'] ? (orientation == 'top' ? 'lg:flex-col-reverse' : 'lg:flex-col') : (orientation == 'left' ? 'lg:flex-row-reverse' : 'lg:flex-row') }}" 
     style="width: 100%; {% if max_height %}max-height: {{ max_height }}; overflow: hidden;{% endif %}">
  
  {# Main Slider #}
  <div class="product-gallery__main splide flex-grow min-w-0" data-splide='{{ main_splide_options|default("{}")|raw }}'>
    <div class="splide__track rounded-box overflow-hidden bg-base-100 border-2 border-base-content/20 shadow-xl transition-all">
      <ul class="splide__list">
        {% for item in items %}
          <li class="splide__slide">
            <figure class="m-0 p-0 aspect-square flex items-center justify-center bg-white">
              {{ item.main }}
            </figure>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  {# Thumbnails Slider - Only show if more than 1 item #}
  {% if items|length > 1 %}
    <div class="product-gallery__thumbnails splide flex-shrink-0 relative w-full {% if orientation in ['left', 'right'] %}lg:w-24{% endif %}"
         data-splide='{{ thumb_splide_options|default("{}")|raw }}'>
      <div class="splide__track">
        <ul class="splide__list">
          {% for item in items %}
            <li class="splide__slide aspect-square rounded-box overflow-hidden border-2 border-base-content/10 transition-all cursor-pointer opacity-50 hover:opacity-100 hover:border-base-content/30 [&.is-active]:opacity-100 [&.is-active]:border-primary bg-base-100 shadow-sm">
              <figure class="m-0 p-0 w-full h-full">
                <img src="{{ item.thumb }}" alt="{{ item.alt }}" loading="{{ item.loading }}" class="w-full h-full object-cover">
              </figure>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  {% endif %}
</div>
