{% comment %}
  Renders a media element for the product gallery.
  Media types include: image, video, external_video and model.
  Accepts:
  - media: {Object} Media Liquid object (required)
  - featured_media: {Object} Media Liquid object (required) - featured media of a given product or variant
  - height: {Number} Maximum height of the gallery (required)
  - image_zoom_size: {String} Size of the zoomed image (e.g., '1024x1024') (required for media type image)
  - enable_image_zoom: {Boolean} Image zoom setting (required for media type image)
  - image_scale:  {String} Image scale (e.g., '2') (required for media type image)

  Usage:
  {%- for media in product.media -%}
    {% include 'media', media: media, featured_media: featured_media, height: height %}
  {%- endfor -%}

  {%- for media in product.media -%}
    {% include 'media', media: media, featured_media: featured_media, height: height,
     enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
  {%- endfor -%}
{% endcomment %}

{% capture media_id %}FeaturedMedia-{{ section.id }}-{{ media.id }}{% endcapture %}
{% capture media_class %}product-featured-media{% endcapture %}
{% capture media_wrapper_id %}{{ media_id }}-wrapper{% endcapture %}

{%- comment -%}
  Load different poster image sizes depending on the product layout
{%- endcomment -%}
{% capture image_size %}{{ height }}x{{ height }}{% endcapture %}

<div data-slidecount="{{slidecount}}" id=""
    class="product-single__media-wrapper js{% unless featured_media == media %}  {% endunless %}"
    {% if media.media_type == 'video' or media.media_type == 'external_video' %} data-product-media-type-video data-enable-video-looping="{{ section.settings.enable_video_looping }}"{% endif %}
    {% if media.media_type == 'model' %} data-product-media-type-model{% endif %}
    {% if media.media_type == 'external_video' %} data-video-id="{{ media.external_id }}"{% endif %}
    data-product-single-media-wrapper
    data-media-id="{{ section.id }}-{{ media.id }}"
    tabindex="-1">
  {% case media.media_type %}
    {% when 'image' %}
      {% capture zoom_media_id %}ImageZoom-{{ section.id }}-{{ media.id }}{% endcapture %}
      {%- assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {% include 'image-style', height: height, wrapper_id: media_wrapper_id, img_id: media_id, image: media.preview_image %}
      <div
        id="{{ zoom_media_id }}"
        style="padding-top:{{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100}}%;"
        class="product-single__media{% if product.media.size > 1 %} product-single__media--has-thumbnails{% endif %}{% if enable_image_zoom %} js-zoom-enabled{% endif %}"
        {% if enable_image_zoom %} data-image-zoom-wrapper data-zoom="{{ media | img_url: image_zoom_size, scale: image_scale }}"{% endif %}
        data-image-loading-animation>
        <a class="fancybox" data-fancybox href="{{ media| img_url: 'master'}}" rel="group">
        <img id=""
          class="feature-row__image {{ media_class }} lazyload{% unless featured_media == media %} lazypreload{% endunless %}"
          {% include 'img-one-pixel' %}
          data-src="{{ img_url }}"
          data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
          data-aspectratio="{{ media.preview_image.aspect_ratio }}"
          data-sizes="auto"
          {% if enable_image_zoom %} data-image-zoom {% endif %}
          alt="{{ media.alt | escape }}"
          {% if featured_media == media and request.page_type == 'product' %} onload="window.performance.mark('debut:product:image_visible');"{% endif %}>
        </a>
      </div>
    {% when 'external_video' %}
      <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
        {{ media | external_video_tag }}
      </div>
    {% when 'video' %}
      <div class="product-single__media product-single__media--video product-single__media--{{ media.id }}" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
        {{ media | video_tag: class: 'media-video', image_size: image_size }}
      </div>
    {% when 'model' %}
      <div class="product-single__media" style="padding-top: 100%">
        {{ media | model_viewer_tag: image_size: image_size, reveal: 'interaction', toggleable: true, data-model-id: media.id }}
      </div>
    {% else %}
      <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
        {{ media | media_tag: class: 'media-item', image_size: image_size }}
      </div>
  {% endcase %}
</div>

{% assign slidecount = slidecount | plus:1 %}


