{% comment %}
  Renders a product media gallery. Should be used with 'media-gallery.js'
  Also see 'product-media-modal'

  Accepts:
  - product: {Object} Product liquid object
  - variant_images: {Array} Product images associated with a variant
  - limit: {Number} (optional) When passed, limits the number of media items to render

  Usage:
  {% render 'product-media-gallery' %}
{% endcomment %}

{%- liquid
  if section.settings.hide_variants and variant_images.size == product.media.size
    assign single_media_visible = true
  endif

  if limit == 1
    assign single_media_visible = true
  endif

  assign media_count = product.media.size
  if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
    assign media_count = media_count | minus: variant_images.size | plus: 1
  endif

  if media_count == 1 or single_media_visible
    assign single_media_visible_mobile = true
  endif

  if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == 'show' or section.settings.mobile_thumbnails == 'columns' and media_count < 3
    assign hide_mobile_slider = true
  endif

  if section.settings.media_size == 'large'
    assign media_width = 0.65
  elsif section.settings.media_size == 'medium'
    assign media_width = 0.55
  elsif section.settings.media_size == 'small'
    assign media_width = 0.45
  endif

  comment
    Ensure media_position starts from 0 so the first rendered media becomes position 1.
    Your 'product-thumbnail' snippet uses position == 1 to add the zoom id/data.
  endcomment
  assign media_position = 0
-%}

<media-gallery
  id="MediaGallery-{{ section.id }}"
  role="region"
  {% if section.settings.enable_sticky_info %}
    class="product__column-sticky"
  {% endif %}
  aria-label="{{ 'products.product.media.gallery_viewer' | t }}"
  data-desktop-layout="{{ section.settings.gallery_layout }}"
>
  <div id="GalleryStatus-{{ section.id }}" class="visually-hidden" role="status"></div>
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
  Renders a product thumbnail with a modal-opener

  Accepts:
  - media: {Object} Product Media object
  - media_count: {Number} Number of media objects
  - position: {String} Position of the media. Used for accessible label.
  - desktop_layout: {String} Layout of the media for desktop.
  - mobile_layout: {String} Layout of the media for mobile.
  - loop: {Boolean} Enable video looping (optional)
  - modal_id: {String} The product modal that will be shown by clicking the thumbnail
  - xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model
  - constrain_to_viewport: {Boolean} Force media height to fit within viewport
  - media_fit: {String} Method ("contain" or "cover") to fit image into container
  - media_width: {Float} The width percentage that the media column occupies on desktop.
  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
{% endcomment %}

{%- liquid
  unless lazy_load == false
    assign lazy = 'lazy'
  endunless

  assign desktop_columns = 1
  if desktop_layout == 'columns' and media_count > 1
    assign desktop_columns = 2
  endif

  assign mobile_columns = 1
  if mobile_layout == 'columns' and media_count > 1
    assign mobile_columns = 2
  endif

  assign img_classes = nil
  assign zoom_id = nil
  assign zoom_image = nil

  if media.media_type == 'image'
    assign image_class = 'image-magnify-' | append: section.settings.image_zoom

    comment
      Make the zoom id fully dynamic so it’s unique per media + section.
      Also add a shared class for JS selection.
    endcomment
    assign zoom_id = 'zoom-' | append: section.id | append: '-' | append: media.id
    assign zoom_image = media.preview_image | image_url: width: 1946
    assign zoom_class = 'js-zoom-image'

    assign img_classes = image_class | append: ' ' | append: zoom_class
  endif
-%}

{%- capture sizes -%}
  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | divided_by: desktop_columns | round }}px, (min-width: 990px) calc({{ media_width | times: 100 | divided_by: desktop_columns }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / {{ mobile_columns }} - 4rem)
{%- endcapture -%}

<div
  class="product-media-container media-type-{{ media.media_type }} media-fit-{{ media_fit }} global-media-settings gradient{% if constrain_to_viewport %} constrain-height{% endif %}"
  style="--ratio: {{ media.aspect_ratio | default: 1.0 }}; --preview-ratio: {{ media.preview_image.aspect_ratio | default: 1.0 }};"
>
  <modal-opener
    class="product__modal-opener product__modal-opener--{{ media.media_type }}"
    data-modal="#ProductModal-{{ modal_id }}"
  >
    <span
      class="product__media-icon motion-reduce quick-add-hidden{% if media.media_type == 'image' %} product__media-icon--{{ section.settings.image_zoom }}{% endif %}"
      aria-hidden="true"
    >
      {% case media.media_type %}
        {% when 'video', 'external_video' %}
          <span class="svg-wrapper">
            {{- 'icon-play.svg' | inline_asset_content -}}
          </span>
        {% when 'model' %}
          <span class="svg-wrapper">
            {{- 'icon-3d-model.svg' | inline_asset_content -}}
          </span>
        {% else %}
          <span class="svg-wrapper">
            {{- 'icon-zoom.svg' | inline_asset_content -}}
          </span>
      {% endcase %}
    </span>
    {%- render 'loading-spinner' -%}
    <div class="product__media media media--transparent">
      {{
        media.preview_image
        | image_url: width: 1946
        | image_tag:
          id: zoom_id,
          class: img_classes,
          loading: lazy,
          sizes: sizes,
          widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',
          data-zoom-image: zoom_image
      }}
    </div>
    <button
      class="product__media-toggle quick-add-hidden product__media-zoom-{{ section.settings.image_zoom }}"
      type="button"
      aria-haspopup="dialog"
      data-media-id="{{ media.id }}"
    >
      <span class="visually-hidden">
        {{ 'products.product.media.open_media' | t: index: position }}
      </span>
    </button>
  </modal-opener>

  {%- if media.media_type != 'image' -%}
    {%- if media.media_type == 'model' -%}
      <product-model class="deferred-media media media--transparent" data-media-id="{{ media.id }}">
    {%- else -%}
      <deferred-media class="deferred-media media media--transparent" data-media-id="{{ media.id }}">
    {%- endif -%}
    <button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
      <span class="deferred-media__poster-button motion-reduce">
        {%- if media.media_type == 'model' -%}
          <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
          <span class="svg-wrapper">
            {{- 'icon-3d-model.svg' | inline_asset_content -}}
          </span>
        {%- else -%}
          <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
          <span class="svg-wrapper">
            {{- 'icon-play.svg' | inline_asset_content -}}
          </span>
        {%- endif -%}
      </span>
      {{
        media.preview_image
        | image_url: width: 1946
        | image_tag:
          loading: lazy,
          sizes: sizes,
          widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
      }}
    </button>
    <template>
      {%- liquid
        case media.media_type
          when 'external_video'
            assign video_class = 'js-' | append: media.host
            if media.host == 'youtube'
              echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
            else
              echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
            endif
          when 'video'
            echo media | media_tag: image_size: '2048x', autoplay: true, loop: loop, controls: true, preload: 'none'
          when 'model'
            echo media | media_tag: image_size: '2048x', toggleable: true
        endcase
      -%}
    </template>

    {%- if media.media_type == 'model' -%}
      </product-model>
      {%- if xr_button -%}
        <button
          class="button button--full-width product__xr-button"
          type="button"
          aria-label="{{ 'products.product.xr_button_label' | t }}"
          data-shopify-xr
          data-shopify-model3d-id="{{ media.id }}"
          data-shopify-title="{{ product.title | escape }}"
          data-shopify-xr-hidden
        >
          <span class="svg-wrapper">
            {{- 'icon-3d-model.svg' | inline_asset_content -}}
          </span>
          {{ 'products.product.xr_button' | t }}
        </button>
      {%- endif -%}
    {%- else -%}
      </deferred-media>
    {%- endif -%}
  {%- endif -%}
</div>

  {%- if first_3d_model -%}
    <button
      class="button button--full-width product__xr-button"
      type="button"
      aria-label="{{ 'products.product.xr_button_label' | t }}"
      data-shopify-xr
      data-shopify-model3d-id="{{ first_3d_model.id }}"
      data-shopify-title="{{ product.title | escape }}"
      data-shopify-xr-hidden
    >
      <span class="svg-wrapper">
        {{- 'icon-3d-model.svg' | inline_asset_content -}}
      </span>
      {{ 'products.product.xr_button' | t }}
    </button>
  {%- endif -%}
  {%- liquid
    assign is_not_limited_to_single_item = false
    if limit == null or limit > 1
      assign is_not_limited_to_single_item = true
    endif
  -%}
  {%- if is_not_limited_to_single_item
    and media_count > 1
    and section.settings.gallery_layout contains 'thumbnail'
    or section.settings.mobile_thumbnails == 'show'
  -%}
    <slider-component
      id="GalleryThumbnails-{{ section.id }}"
      class="thumbnail-slider slider-mobile-gutter quick-add-hidden{% unless section.settings.gallery_layout contains 'thumbnail' %} medium-hide large-up-hide{% endunless %}{% if section.settings.mobile_thumbnails != 'show' %} small-hide{% endif %}{% if media_count <= 3 %} thumbnail-slider--no-slide{% endif %}"
    >
      <button
        type="button"
        class="slider-button slider-button--prev{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}"
        name="previous"
        aria-label="{{ 'general.slider.previous_slide' | t }}"
        aria-controls="GalleryThumbnails-{{ section.id }}"
        data-step="3"
      >
        <span class="svg-wrapper">
          {{- 'icon-caret.svg' | inline_asset_content -}}
        </span>
      </button>
      <ul
        id="Slider-Thumbnails-{{ section.id }}"
        class="thumbnail-list list-unstyled slider slider--mobile{% if section.settings.gallery_layout == 'thumbnail_slider' %} slider--tablet-up{% endif %}"
      >
        {%- capture sizes -%}
          (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4),
          (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4),
          (min-width: 750px) calc((100vw - 15rem) / 8),
          calc((100vw - 8rem) / 3)
        {%- endcapture -%}

        {%- if featured_media != null -%}
          {%- liquid
            capture media_index
              if featured_media.media_type == 'model'
                increment model_index
              elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video'
                increment video_index
              elsif featured_media.media_type == 'image'
                increment image_index
              endif
            endcapture
            assign media_index = media_index | plus: 1
          -%}
          <li
            id="Slide-Thumbnails-{{ section.id }}-0"
            class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %}"
            data-target="{{ section.id }}-{{ featured_media.id }}"
            data-media-position="{{ media_index }}"
          >
            {%- capture thumbnail_id -%}
              Thumbnail-{{ section.id }}-0
            {%- endcapture -%}
            <button
              class="thumbnail global-media-settings global-media-settings--no-shadow"
              aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
              aria-current="true"
              aria-controls="GalleryViewer-{{ section.id }}"
              aria-describedby="{{ thumbnail_id }}"
            >
              {{
                featured_media.preview_image
                | image_url: width: 416
                | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: featured_media.alt
                | escape
              }}
            </button>
          </li>
        {%- endif -%}
        {%- for media in product.media -%}
          {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
            {%- liquid
              capture media_index
                if media.media_type == 'model'
                  increment model_index
                elsif media.media_type == 'video' or media.media_type == 'external_video'
                  increment video_index
                elsif media.media_type == 'image'
                  increment image_index
                endif
              endcapture
              assign media_index = media_index | plus: 1
            -%}
            <li
              id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}"
              class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
              data-target="{{ section.id }}-{{ media.id }}"
              data-media-position="{{ media_index }}"
            >
              {%- if media.media_type == 'model' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  <span class="svg-wrapper">
                    {{- 'icon-3d-model.svg' | inline_asset_content -}}
                  </span>
                </span>
              {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  <span class="svg-wrapper">
                    {{- 'icon-play.svg' | inline_asset_content -}}
                  </span>
                </span>
              {%- endif -%}
              {%- capture thumbnail_id -%}
                Thumbnail-{{ section.id }}-{{ forloop.index }}
              {%- endcapture -%}
              <button
                class="thumbnail global-media-settings global-media-settings--no-shadow"
                aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                {% if media == product.selected_or_first_available_variant.featured_media
                  or product.selected_or_first_available_variant.featured_media == null
                  and forloop.index == 1
                %}
                  aria-current="true"
                {% endif %}
                aria-controls="GalleryViewer-{{ section.id }}"
                aria-describedby="{{ thumbnail_id }}"
              >
                {{
                  media.preview_image
                  | image_url: width: 416
                  | image_tag:
                    loading: 'lazy',
                    sizes: sizes,
                    widths: '54, 74, 104, 162, 208, 324, 416',
                    id: thumbnail_id,
                    alt: media.alt
                  | escape
                }}
              </button>
            </li>
          {%- endunless -%}
        {%- endfor -%}
      </ul>
      <button
        type="button"
        class="slider-button slider-button--next{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}"
        name="next"
        aria-label="{{ 'general.slider.next_slide' | t }}"
        aria-controls="GalleryThumbnails-{{ section.id }}"
        data-step="3"
      >
        <span class="svg-wrapper">
          {{- 'icon-caret.svg' | inline_asset_content -}}
        </span>
      </button>
    </slider-component>
  {%- endif -%}
</media-gallery>
