{% comment %}
  Renders a product media carousel with thumbnails.

  Accepts:
  - hover_zoom_enabled: {Boolean} Whether to enable hover zoom on the main image (optional)
   - hover_zoom_enabled: {Boolean} Whether to enable click zoom on the main image (optional)
   - autoplay: {Boolean} Whether to enable video autoplay (optional)
   - video_modal: {Boolean} Whether to enable video style modal (optional)
   - media_sticky: {Boolean} Enable position sticky (optional)

  Usage:
  {% render 'product-info-media-style4' %}
{% endcomment %}

{{ 'product-info-media-style4.css' | asset_url | stylesheet_tag }}

{% assign featured_media = product.selected_or_first_available_variant.featured_media %}
{% assign media_aspect_ratio = settings.product_card_aspect_ratio %}

<div
  class='xo-product-info-media-style4'
  {%- if media_sticky -%}
    style='position: sticky;'
  {%- endif -%}
>
  <xo-gallery xo-sync='false' xo-portal-class='main-product__portal'>
    <xo-carousel xo-name='product-information-desktop' class='xo-product-info-media-style4__carousel'>
      <div class='xo-product-info-media-style4__left'>
        {%- if product.media.size >= 4 -%}
          {%- assign thumbnail_perview = 4 -%}
        {%- else -%}
          {%- assign thumbnail_perview = product.media.size -%}
        {%- endif -%}
        <xo-carousel-thumbnail class='xo-product-info-media-style4__thumbnails' xo-per-view='{{ thumbnail_perview }}' xo-gap='10' xo-vertical>
          <div class='xo-product-info-media-style4__thumbnails-inner' style='--media_aspect-ratio:{{ media_aspect_ratio }}'>
            <xo-carousel-inner>
              <xo-carousel-list>
                {%- if featured_media != null -%}
                  {% case featured_media.media_type %}
                    {% when 'image' %}
                      <xo-carousel-slide class='xo-product-info-media-style4__thumb-slide'>
                        {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: featured_media.preview_image %}
                      </xo-carousel-slide>
                    {% when 'model' %}
                      <xo-carousel-slide class='xo-product-info-media-style4__thumb-slide'>
                        {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: featured_media.preview_image %}
                        <div class='xo-product-info-media-style4__media-icon'>
                          {% render 'icon', name: '3d-model', icon_size: '13' %}
                        </div>
                      </xo-carousel-slide>
                    {% else %}
                      {% if video_modal == false and product_360 == false %}
                        <xo-carousel-slide class='xo-product-info-media-style4__thumb-slide'>
                          {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: featured_media.preview_image %}
                          <div class='xo-product-info-media-style4__media-icon xo-product-info-media-style4__media-icon--play'>
                            {% render 'icon', name: 'play', icon_size: '13' %}
                          </div>
                        </xo-carousel-slide>
                      {% endif %}
                  {% endcase %}
                {%- endif -%}
                {% for media in product.media %}
                  {% unless media.id == featured_media.id %}
                    {% case media.media_type %}
                      {% when 'image' %}
                        <xo-carousel-slide class='xo-product-info-media-style4__thumb-slide'>
                          {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: media.preview_image %}
                        </xo-carousel-slide>
                      {% when 'model' %}
                        <xo-carousel-slide class='xo-product-info-media-style4__thumb-slide'>
                          {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: media.preview_image %}
                          <div class='xo-product-info-media-style4__media-icon'>
                            {% render 'icon', name: '3d-model', icon_size: '13' %}
                          </div>
                        </xo-carousel-slide>
                      {% else %}
                        {% if video_modal == false and product_360 == false %}
                          <xo-carousel-slide class='xo-product-info-media-style4__thumb-slide'>
                            {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: media.preview_image %}
                            <div class='xo-product-info-media-style4__media-icon xo-product-info-media-style4__media-icon--play'>
                              {% render 'icon', name: 'play', icon_size: '13' %}
                            </div>
                          </xo-carousel-slide>
                        {% endif %}
                    {% endcase %}
                  {% endunless %}
                {% endfor %}
              </xo-carousel-list>
            </xo-carousel-inner>
          </div>
        </xo-carousel-thumbnail>
      </div>
      <div class='xo-product-info-media-style4__right'>
        <xo-carousel-inner>
          <xo-carousel-list>
            {% if featured_media != null %}
              {% case featured_media.media_type %}
                {% when 'image' %}
                  <xo-carousel-slide data-media-id='{{ featured_media.id }}' class='xo-product-info-media-style4__slide'>
                    {% if hover_zoom_enabled and click_zoom_enabled == false %}
                      <xo-image-zoom xo-zoom='3' xo-use-wheel='false' xo-zoom-src='{{ featured_media.src | image_url: width: 1200 }}'>
                        <div class='xo-product-info-media-style4__image'>
                          {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: featured_media %}
                        </div>
                      </xo-image-zoom>
                    {% elsif hover_zoom_enabled == false and click_zoom_enabled %}
                      <xo-gallery-item xo-src='{{ featured_media.src | image_url: width: 1200 }}'>
                        <div class='xo-product-info-media-style4__image'>
                          {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: featured_media %}
                        </div>
                      </xo-gallery-item>
                    {% elsif hover_zoom_enabled and click_zoom_enabled %}
                      <xo-image-zoom xo-zoom='3' xo-use-wheel='false' xo-zoom-src='{{ featured_media.src | image_url: width: 1200 }}'>
                        <xo-gallery-item xo-src='{{ featured_media.src | image_url: width: 1200 }}'>
                          <div class='xo-product-info-media-style4__image'>
                            {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: featured_media %}
                          </div>
                        </xo-gallery-item>
                      </xo-image-zoom>
                    {% elsif hover_zoom_enabled == false and click_zoom_enabled == false %}
                      {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: featured_media %}
                    {% endif %}
                  </xo-carousel-slide>
                {% when 'model' %}
                  <xo-carousel-slide data-media-id='{{ featured_media.id }}' class='xo-product-info-media-style4__slide'>
                    <xo-product-model>
                      <button class='xb-product-model__poster' type='button'>
                        <span class='xb-product-model__poster-button'>
                          {% render 'icon', name: '3d-model', icon_size: '20' %}
                        </span>
                        <div class='xb-product-model__poster-image' style='--media-aspect-ratio: {{ media_aspect_ratio }}'>
                          <img
                            is='xo-lazyload'
                            width='{{ featured_media.preview_image.width }}'
                            height='{{ featured_media.preview_image.height }}'
                            src='{{ featured_media | image_url: width: featured_media.preview_image.width, height: featured_media.preview_image.height }}'
                            alt='{{ featured_media.preview_image.alt | escape }}'
                          >
                          <div class='xo-lazyload-overlay'></div>
                        </div>
                      </button>
                      <template>{% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'model', media: featured_media %}</template>
                    </xo-product-model>
                  </xo-carousel-slide>
                {% else %}
                  {% if video_modal == false and product_360 == false %}
                    <xo-carousel-slide data-media-id='{{ featured_media.id }}' class='xo-product-info-media-style4__slide'>
                      {% render 'media', media_aspect_ratio: media_aspect_ratio, type: featured_media.media_type, media: featured_media, autoplay: autoplay %}
                    </xo-carousel-slide>
                  {% endif %}
              {% endcase %}
            {% endif %}
            {% for media in product.media %}
              {% unless media.id == featured_media.id %}
                {% case media.media_type %}
                  {% when 'image' %}
                    <xo-carousel-slide data-media-id='{{ media.id }}' class='xo-product-info-media-style4__slide'>
                      {% if hover_zoom_enabled and click_zoom_enabled == false %}
                        <xo-image-zoom xo-zoom='3' xo-use-wheel='false' xo-zoom-src='{{ media.src | image_url: width: 1200 }}'>
                          <div class='xo-product-info-media-style4__image'>
                            {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: media %}
                          </div>
                        </xo-image-zoom>
                      {% elsif hover_zoom_enabled == false and click_zoom_enabled %}
                        <xo-gallery-item xo-src='{{ media.src | image_url: width: 1200 }}'>
                          <div class='xo-product-info-media-style4__image'>
                            {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: media %}
                          </div>
                        </xo-gallery-item>
                      {% elsif hover_zoom_enabled and click_zoom_enabled %}
                        <xo-image-zoom xo-zoom='3' xo-use-wheel='false' xo-zoom-src='{{ media.src | image_url: width: 1200 }}'>
                          <xo-gallery-item xo-src='{{ media.src | image_url: width: 1200 }}'>
                            <div class='xo-product-info-media-style4__image'>
                              {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: media %}
                            </div>
                          </xo-gallery-item>
                        </xo-image-zoom>
                      {% elsif hover_zoom_enabled == false and click_zoom_enabled == false %}
                        {% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'image', media: media %}
                      {% endif %}
                    </xo-carousel-slide>
                  {% when 'model' %}
                    <xo-carousel-slide data-media-id='{{ media.id }}' class='xo-product-info-media-style4__slide'>
                      <xo-product-model>
                        <button class='xb-product-model__poster' type='button'>
                          <span class='xb-product-model__poster-button'>
                            {% render 'icon', name: '3d-model', icon_size: '20' %}
                          </span>
                          <div class='xb-product-model__poster-image' style='--media-aspect-ratio: {{ media_aspect_ratio }}'>
                            <img
                              is='xo-lazyload'
                              width='{{ media.preview_image.width }}'
                              height='{{ media.preview_image.height }}'
                              src='{{ media | image_url: width: media.preview_image.width, height: media.preview_image.height }}'
                              alt='{{ media.preview_image.alt | escape }}'
                            >
                            <div class='xo-lazyload-overlay'></div>
                          </div>
                        </button>
                        <template>{% render 'media', media_aspect_ratio: media_aspect_ratio, type: 'model', media: media %}</template>
                      </xo-product-model>
                    </xo-carousel-slide>
                  {% else %}
                    {% if video_modal == false and product_360 == false %}
                      <xo-carousel-slide data-media-id='{{ media.id }}' class='xo-product-info-media-style4__slide'>
                        {% render 'media', media_aspect_ratio: media_aspect_ratio, type: media.media_type, media: media, autoplay: autoplay %}
                      </xo-carousel-slide>
                    {% endif %}
                {% endcase %}
              {% endunless %}
            {% endfor %}
          </xo-carousel-list>
        </xo-carousel-inner>
        {% if video_modal and product.metafields.custom.video_embed != blank %}
          {% render 'popup-video', name: 'style4' %}
        {% endif %}
        {% if product_360 and product.metafields.custom.product_360 != blank %}
          {% render 'product-360', name: 'style4' %}
        {% endif %}
        <xo-carousel-prev class='xo-product-info-media-style4__arrow xo-product-info-media-style4__arrow--left'
          ><button>{% render 'icon', name: 'arrow-left', icon_size: '12' %}</button></xo-carousel-prev
        >
        <xo-carousel-next class='xo-product-info-media-style4__arrow xo-product-info-media-style4__arrow--right'
          ><button>{% render 'icon', name: 'arrow-right', icon_size: '12' %}</button></xo-carousel-next
        >
      </div>
    </xo-carousel>
  </xo-gallery>
</div>
{% render 'product-info-media-mobile',
  hover_zoom_enabled: section.settings.image_zoom_hover,
  click_zoom_enabled: section.settings.image_zoom_click,
  autoplay: section.settings.video_autoplay,
  video_modal: section.settings.video_modal,
  product_360: section.settings.product_360
%}
