<?php
/**
 * @var int $product_id
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound

if ( ! isset( $product_id ) ) {
	$product_id = get_the_ID();
}

?>
<div class="storeengine-gallery_wrapper">
	<?php if ( storeengine_has_product_gallery( $product_id ) ) : ?>
		<div class="storeengine-row">
			<!-- Thumbnail Gallery Carousel -->
			<div class="storeengine-col-12 storeengine-col-lg-2">
				<div class="carousel carousel-nav storeengine-product-single__thumbnail"
					 data-flickity='{"asNavFor":".carousel-main","draggable":false,"percentPosition":false,"groupCells":"100%","pageDots":false,"loop":true,"prevNextButtons":true}'>
					<span
						class="carousel-cell"><?php storeengine_product_image( 'storeengine_thumbnail', $product_id ); ?></span>
					<?php storeengine_product_gallery( $product_id ); ?>
				</div>
			</div>

			<!-- Main Product Image Carousel -->
			<div class="storeengine-col-12 storeengine-col-lg-10">
				<div class="carousel carousel-main"
					 data-flickity='{"contain":true,"pageDots":false,"loop":true,"prevNextButtons":false}'>
					<?php storeengine_product_image( 'storeengine_thumbnail', $product_id ); ?>
					<?php storeengine_product_gallery( $product_id ); ?>
				</div>
			</div>
		</div>
	<?php else : ?>
		<div class="storeengine-row">
			<!-- Thumbnail Gallery Carousel -->
			<div class="storeengine-col-12">
				<?php storeengine_product_image( 'storeengine_thumbnail', $product_id ); ?>
			</div>
		</div>
	<?php endif; ?>
</div>
