{%- doc -%}
  Displays product images in a carousel.
  Settings allow for a full slideshow, showing only the first image, or showing the second image when hovering.
  Note: When the product card itself is in a carousel layout, the card-gallery's carousel is disabled with JavaScript.

  @param [children] - Additional content rendered below the card gallery
  @param [section] - The section object the snippet is rendered in
  @param [block] - The block object the snippet is rendered in
{%- enddoc -%}

{% liquid
  assign product = closest.product
  assign block_settings = block.settings
  assign image_sizes = '(min-width: 750px) 50vw, 100vw'

  # Check if product has badges and determine position
  assign has_badges = false
  assign badge_position = null
  if product != blank
    comment
        start Yagi
      endcomment
      assign product_compare_at_price = product.compare_at_price
      assign product_price = product.price

      assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price

      if product.metafields.app--168074346497.discount_percentage.value > 0.01
        assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value

        assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil

        assign product_compare_at_price = product.price

        if product.compare_at_price > product_compare_at_price
          assign product_compare_at_price = product.compare_at_price
        endif
      endif
      comment
        end Yagi
      endcomment

    if product.available == false or product_compare_at_price > product_price
      assign has_badges = true
      assign badge_position = settings.badge_position
    endif
  endif

  # if the card-gallery has a section.settings.product_card_size:
  # assume grid-template autofill(card-size, 1fr) and calculate the sizes attribute based on the minimum card size
  #
  # if section has section.settings.columns:
  # assume grid-template repeat(column-count, 1fr) and calculate the sizes attribute based on the number of columns
  if section.settings.product_card_size
    assign mobile_image_size = '100vw'
    if section.settings.mobile_product_card_size == 'small'
      assign mobile_image_size = '50vw'
    endif

    capture card_size
      render 'util-product-grid-card-size', section: section
    endcapture
    assign card_size = card_size | strip | replace: 'px', '' | plus: 0
    capture sizes_attribute
      render 'util-autofill-img-size-attr', card_size: card_size, card_gap: section.settings.columns_gap_horizontal, mobile_size: mobile_image_size
    endcapture
    assign image_sizes = sizes_attribute | strip
  elsif section.settings.columns and section.settings.layout_type != 'editorial'
    assign viewport_width = 100.0 | divided_by: section.settings.columns
    assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 100vw' | replace: '[viewport_width]', viewport_width
    assign image_sizes = sizes_attribute | strip
  endif

  assign ratio = '1'
  case block_settings.image_ratio
    when 'landscape'
      assign ratio = '16 / 9'
    when 'portrait'
      assign ratio = '4 / 5'
    when 'square'
      assign ratio = '1'
    when 'adapt'
      assign ratio = product.featured_media.preview_image.aspect_ratio | default: '1'
  endcase

  if block_settings.image_ratio == 'adapt' and block_settings.constrain_to_viewport
    if block_settings.constrain_to_viewport != ''
      assign constrain_to_viewport = true
      assign media_fit = block_settings.constrain_to_viewport
    endif
  endif
%}

<div
  ref="cardGallery"
  class="card-gallery card-gallery-{{ block.id }} spacing-style border-style{% if has_badges %} card-gallery--badge-{{ badge_position }}{% endif %}"
  style="
    {% render 'border-override', settings: block_settings %}
    {% render 'spacing-style', settings: block_settings %}
    --gallery-aspect-ratio: {{ ratio }};
  "
  data-product-id="{{ product.id }}"
  {% if settings.show_second_image_on_hover and product.media.size > 1 %}
    on:pointerenter="/previewImage"
    on:pointerleave="/resetImage"
  {% endif %}
  {% if settings.transition_to_main_product %}
    data-view-transition-to-main-product
  {% endif %}
  data-image-ratio="{{ block_settings.image_ratio }}"
  {{ block.shopify_attributes }}
>
  {%- if product.media.size > 0 -%}
    <a
      class="contents"
      ref="cardGalleryLink"
      href="{{ product.url }}"
      aria-label="{{- product.title -}}"
    >
      {% liquid
        assign featured_media = product.featured_media

        assign featured_media_loading = 'lazy'
        assign featured_media_sizes = 'auto, ' | append: image_sizes
        if section.index == null or section.index < 5
          assign featured_media_loading = 'eager'
          assign featured_media_sizes = image_sizes
        endif

        # The class differs per media only by media_type; the base template and the
        # constrain-height suffix are the same for every slide, so build them once.
        assign media_class = 'product-media-container media-fit product-media-container--[media_type]'
        assign media_class_suffix = ''
        if constrain_to_viewport
          assign media_class_suffix = ' constrain-height'
        endif

        assign featured_media_class = media_class | replace: '[media_type]', featured_media.media_type | append: media_class_suffix
      %}
      {%- if product.media.size == 1 -%}
        <div
          class="{{ featured_media_class }}"
          style="--product-media-fit: {{ media_fit | default: 'cover' }};"
        >
          {% render 'product-media',
            media: featured_media,
            sizes: featured_media_sizes,
            loading: featured_media_loading,
            preview_image_only: true
          %}
        </div>
      {%- else -%}
        {% liquid
          # Check if there are generic media that are not variant images
          assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
          assign generic_media_size = product.media.size | minus: variant_images.size

          # Sort media so product.featured_media.preview_image comes first as that is the most relevant image to display
          # product.featured_media updates based on search context and filters applied

          assign other_media = product.media | reject: 'src', product.featured_media
          assign media_list_to_show = product.featured_media | concat: other_media

          # Don't overfetch media if we don't need to
          assign max_visible_slide_count = 1
          if settings.product_card_carousel
            assign max_visible_slide_count = 5
          elsif settings.show_second_image_on_hover
            assign max_visible_slide_count = 2
          endif

          capture slides
            for media in media_list_to_show
              assign hidden = false
              assign attributes = ''
              if variant_images contains media.src
                assign attributes = 'variant-image'

                if forloop.first == false
                  # hide all variant images that aren't the first one
                  assign hidden = true
                endif
              endif

              # Performance improvement: don't render more than 5 visible images into the slideshow
              # We'll keep the images that we need for the variant images and hover next.
              if forloop.first
                assign visible_slide_count = 0
              endif
              unless hidden
                assign visible_slide_count = visible_slide_count | plus: 1
              endunless
              if hidden == false and visible_slide_count > max_visible_slide_count
                continue
              endif

              if forloop.first
                assign loading = featured_media_loading
                assign sizes = featured_media_sizes
              else
                assign loading = 'lazy'
                assign sizes = 'auto, ' | append: image_sizes
              endif

              assign class = media_class | replace: '[media_type]', media.media_type | append: media_class_suffix

              capture slideshow_children
                render 'product-media', media: media, sizes: sizes, loading: loading, preview_image_only: true
              endcapture

              render 'slideshow-slide', slide_id: media.id, index: forloop.index0, hidden: hidden, class: class, attributes: attributes, children: slideshow_children, media_fit: media_fit
            endfor
          endcapture

          # Arrows can only reach slides that are rendered visible. Variant images past
          # the featured media are hidden, so a product whose only extra media are
          # variant images has a single navigable slide and would get inert arrows.
          if product.media.size > 2 and visible_slide_count > 1
            assign show_arrows = true
          endif

          assign slideshow_attributes = 'data-generic-media-size="[generic_media_size]"' | replace: '[generic_media_size]', generic_media_size
          if settings.product_card_carousel == false
            assign slideshow_attributes = slideshow_attributes | append: ' disabled="true"'
          endif
        %}
        {% render 'slideshow',
          ref: 'slideshow',
          initial_slide: 0,
          slides: slides,
          slide_count: media_list_to_show.size,
          show_arrows: show_arrows,
          attributes: slideshow_attributes
        %}
      {%- endif -%}
    </a>
  {% elsif product != blank and product.media.size == 0 %}
    <div class="product-card-gallery__title-placeholder">
      <a
        class="contents"
        ref="cardGalleryLink"
        href="{{ product.url }}"
      >
        <span class="title-text">{{- product.title -}}</span>
      </a>
    </div>
  {% elsif product == blank %}
    {% liquid
      capture placeholder_image
        # Extract index from block ID (e.g., "product-card-3" -> "3")
        assign block_parts = block.id | split: '-'
        assign placeholder_index = block_parts.last | default: 0
        assign variant = placeholder_index | modulo: 3 | plus: 1
        assign placeholder_name = 'product-apparel-' | append: variant
        echo placeholder_name | placeholder_svg_tag
      endcapture
      capture placeholder_slide
        render 'slideshow-slide', index: 1, children: placeholder_image, class: 'product-media-container card-gallery__placeholder'
      endcapture
      render 'slideshow', ref: 'slideshow', slides: placeholder_slide, slide_count: 1, attributes: 'disabled="true"'
    %}
  {%- endif -%}
  {{ children }}
</div>

{% render 'slideshow-styles' %}
{% render 'product-media-container-styles' %}

{% stylesheet %}
  .card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-inline-end: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-inline-end: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-inline-end: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-inline-end: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-inline-end: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);

      [dir='rtl'] & {
        padding-inline: var(--padding-sm) 0;
      }
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
{% endstylesheet %}