<div id="product-images" class="product-images sticky sticky-below-header d-pr-50">
	{%- if product.images.size > 0 -%}
		<div class="product-images-main swiper flex-1 ml-0 pb-0 d-pb-0">
			<div class="hide-d">
				{%- render 'product-tags-label', product: product, wrapper_class: 'absolute top-15 t-top-20 left-15 t-left-20 zi-1' -%}
			</div>
			
			<div class="swiper-wrapper">
				{%- assign image_num = 1 -%}
				{%- for image in product.images -%}
					<div onclick="productFormVue.handleShowGalleryPopup({{ image_num }})" class="each swiper-slide" data-image-id="{{ image.id }}" data-index="{{ image_num | minus: 1 }}">
						{%- assign image_alt = 'Image' | append: image_num -%}
						{%- render 'global-image-wrapper',
							additional_class: 'no-bg', 
							image: image, 
							size: '2000x', 
							image_alt: image_alt,
							preload: true
						-%}
					</div>
					{%- assign image_num = image_num | plus: 1 -%}
				{%- endfor -%}
			</div>
			<div class="swiper-arrows-box absolute w-full top-50c hide-m show-d">
				<div class="relative container">
					<div class="swiper-button swiper-button-prev">{{ settings.icon_slide_left }}</div>
					<div class="swiper-button swiper-button-next">{{ settings.icon_slide_right }}</div>
				</div>
			</div>
		</div>

		<div class="relative mt-0 hide-d">
			{% comment %} <div class="swiper-scrollbar"></div> {% endcomment %}
			<div class="swiper-pagination left-align"></div>
		</div>

		<div class="product-images-popup-content">
			<div onclick="productFormVue.handleHideGalleryPopupOverlay(event);" class="popup-content w-full h-full absolute top-0 left-0 zi-7">
				<div class="inner-wrapper w-full h-full absolute top-0">
				<button type="button" onclick="productFormVue.handleHideGalleryPopup();" class="close zi-2 flex ai-center jc-center">{{ settings.icon_close }}</button>
				<div aria-label="Close fullscreen gallery" onclick="productFormVue.handleHideGalleryPopup();" class="image-background cursor w-full h-full absolute top-0" role="button" tabindex="0"></div>
				<div class="inner">	
					<div class="swiper product-popup-swiper">
						<div class="swiper-wrapper">
							{%- assign image_num = 1 -%}
								{%- for image in product.images -%}
									<button onclick="productFormVue.handleToggleZoomMode()" type="button" class="swiper-slide image-box" data-image-id="{{ image.id }}" data-index="{{ image_num }}">
										{%- assign image_alt = 'Image' | append: image_num -%}
										{%- render 'global-image-wrapper', preload: true, additional_class: 'no-bg', image: image, size: '2000x', image_alt: image_alt -%}
									</button>
									{%- assign image_num = image_num | plus: 1 -%}
								{%- endfor -%}
						</div>
					
					</div>
				</div>
				<div class="product-images-popup-swiper-pagination p1 p-10 flex colgap-5 absolute top-0 left-0"></div>

				<div class="product-images-popup-swiper-button-next swiper-button-next">{{ settings.icon_slide_right }}</div>
				<div class="product-images-popup-swiper-button-prev swiper-button-prev">{{ settings.icon_slide_left }}</div>
				</div>
			</div>
		</div>
	{%- endif -%}
</div>