{extends Layout}

{block content}
<!-- Start Banner Area -->
<section class="banner-area organic-breadcrumb">
	<div class="container">
		<div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
			<div class="col-first">
				<h1>{$product['name']}</h1>
			</div>
		</div>
	</div>
</section>
<!-- End Banner Area -->

{include Flash}

<div class="product_image_area">
	<div class="container">
		<div class="row s_product_inner">
			<div class="col-lg-6">
				<div>
					{if $product["mainphoto_file"] !== null}
					<img class="img-fluid" src="{url photoFormat $product['mainphoto_file'],'crphoto','900x900.webp'}" alt="">
					{else}
					<img class="img-fluid" src="/gfx/no-image.png" alt="">
					{/if}
				</div>

				<div class="row product-gallery pswp-gallery">
					{loop $product['photos'] as $photo}
					<a href="{url photoFormat $photo['file'],'photo','2000x2000.webp'}" class="col-xs-6 col-md-4" data-pswp-width="{$photo['width']}" data-pswp-height="{$photo['height']}" >
						<img src="{url photoFormat $photo['file'],'crphoto','400x300.webp'}" alt="{$product['manufacturer']} | {$product['scale']} | {$product['name']}" itemprop="image">
					</a>
					{/loop}
				</div>
			</div>
			<div class="col-lg-5 offset-lg-1">
				<div class="s_product_text">
					<h3>{$product['name']}</h3>
					<h2>{$product->getPrice($withVat, 1, $wholesale)|number:2} €</h2>
					{if $product["width"] !== null and $product["height"] !== null}
					<p>{% rozmery}: {$product["width"] |number:0} cm × {$product["height"] |number:0} cm</p>
					{/if}
					<p>{!$product["long_description"] |format}</p>

					<div class="card_area d-flex align-items-center">
						<a class="primary-btn" href="{url eshopAddToCart $product['id']}?return={$fullUrl|urlencode}">{% Pridať do košíka}</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="module">
	import PhotoSwipeLightbox from '/js/photoswipe/photoswipe-lightbox.esm.js';
	const lightbox = new PhotoSwipeLightbox({
		gallery: '.product-gallery',
		children: 'a',
		pswpModule: () => import('/js/photoswipe/photoswipe.esm.js'),
		showHideAnimationType: 'fade',
	});
	lightbox.init();
	</script>
{/block}