{%- 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

	Usage:
	{%- for media in product.media -%}
		{% render 'media', media: media, featured_media: featured_media %}
	{%- endfor -%}
{%- endcomment -%}

{%- assign image_size = '1024x1024' -%}
{%- assign image_zoom_size = '2048x2048' -%}
{%- capture media_wrapper_id -%}FeaturedMedia-{{ unique }}-{{ media.id }}-wrapper{%- endcapture -%}

{%- assign media_aspect_ratio = media.aspect_ratio -%}
{%- unless media_aspect_ratio -%}
	{%- assign media_aspect_ratio = 1 -%}
{%- endunless -%}
{%- assign media_padding_top = 1 | divided_by: media_aspect_ratio | times: 100 | round: 1 -%}

{%- comment -%} Always show product media in square on Quick view {%- endcomment -%}
{%- if template == 'product.ajax_quickview' -%}
	{%- assign media_padding_top = 100 -%}
{%- endif -%}

{%- capture sale_badge -%}
	{%- if show_sale_badge and featured_media == media -%}
		{%- if current_variant.compare_at_price > current_variant.price -%}
			{%- if sold_out -%}
				{%- assign on_sale = false -%}
			{%- else -%}
				{%- assign on_sale = true -%}
			{%- endif -%}
		{%- else -%}
			{%- assign on_sale = false -%}
		{%- endif -%}

		{%- if on_sale -%}
			<div class="product-status-flag tag-fp fp-on-sale-tag tag--{{ settings.product_badge_style }}" id="tag-{{ current_variant.id }}" data-product-badge><span>{{ 'products.product.on_sale_html' | t }}</span></div>
		{%- endif -%}
	{%- endif -%}
{%- endcapture -%}

{%- assign sold_out = true -%}
{%- if current_variant.available -%}
	{%- assign sold_out = false -%}
{%- endif -%}

{%- assign image_gallery_class = '' -%}
{%- if image_gallery == 'zoom' -%}
	{%- assign image_gallery_class = 'hover-zoom' -%}
{%- elsif image_gallery == 'lightbox' -%}
	{%- assign image_gallery_class = 'mfp-zoom-in-cur' -%}
{%- endif -%}

{% assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' %}
{% assign alt_down = media.alt | downcase %}
{% assign is_color = false %}
{% assign type_color = false %}
{%- for option in product.options_with_values -%}
  {%- assign downcased_option = option.name | downcase -%}
  {% if color_label contains downcased_option %}
	{% assign is_color = true %}
	{% assign select_Value = option.selected_value | downcase %}
	{% for value in option.values %}
		{% assign value_down = value | downcase %}
		{% comment %} {{ value_down }} -- {{ alt_down}} {% endcomment %}
		{% if value_down == alt_down %}
			{% assign type_color = true %}
		{% endif %}
	{% endfor %}
  {% endif %}
{% endfor %}

{% comment %} find theme.js [change_tab_image] to custom function  {% endcomment %}

<div id="{{ media_wrapper_id }}"
	class="{{ media_wrapper_id }} langly_sliders mediagridliquid product-single__media-slide{% unless featured_media == media %} media--hidden{% endunless %}"
	data-id="{{ media.id }}"
	{% if type_color %}data-option="{{ alt_down }}" {% endif %}
	{% if type_color and select_Value != alt_down %}hidden{% endif %}
    data-media-id="{{ unique }}-{{ media.id }}"
    data-aspectratio="{{ media_aspect_ratio }}"
    data-product-single-media-wrapper
	{% 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 %}
    tabindex="-1">
	{%- case media.media_type -%}
		{%- when 'image' -%}
			{%- assign image = media -%}
			{%- assign image_url_pattern = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
			{%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]" -%}

			<div class="product-single__media product-single__media--image" data-id="{{ media.id }}">
				<div class="product-single__media--image-height" style="padding-top: 100%;"></div>
				<img class="{{ image_gallery_class }} lazyload "
					src="{{ 'blank.gif' | asset_img_url: '1x1' }}"
					data-src="{{ image_url_pattern }}"
					data-widths= "{{ image_widths }}"
					data-aspectratio="{{ media_aspect_ratio }}"
					data-sizes="auto"
					data-object-fit="contain"
					{% if image_gallery == 'lightbox' %}
						data-lightbox
						{% if main_slide %}
							data-mfp-src="{{ media | img_url: image_zoom_size }}"
						{% endif %}
					{% elsif image_gallery == 'zoom' %}
						data-zoom="{{ media | img_url: image_zoom_size }}"
						{% if main_slide %}
							data-lightbox-mb
							data-mfp-src="{{ media | img_url: image_zoom_size }}"
						{% endif %}
					{% endif %}
					alt="{{ media.alt | escape }}">
				<noscript>
					<img src="{{ media | img_url: image_zoom_size }}" alt="{{ media.alt | escape }}" class="{{ image_gallery_class }}" id="{{ media.id }}">
				</noscript>
			</div>
		{%- when 'external_video' -%}
			<div class="media_external_video product-single__media product-single__media--video" style="padding-top: {{ media_padding_top }}%;">
				{{ media | external_video_tag }}
			</div>
		{%- when 'video' -%}
			<div class="{% if main_slide == false %}only_poster {% endif %}media_video product-single__media product-single__media--video product-single__media--{{ media.id }}" style="padding-top: {{ media_padding_top }}%;">
				{{ media | video_tag: class: 'media-video videoo', image_size: image_size, autoplay: true, controls: true }}
			</div>
		{%- when 'model' -%}
			<div class="media_model product-single__media product-single__media--model" style="padding-top: {{ media_padding_top }}%">
				{{ 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: {{ media_padding_top }}%;">
				{{ media | media_tag: class: 'media-item', image_size: image_size }}
			</div>
	{%- endcase -%}
	{{- sale_badge -}}
</div>