@php
	$galleryImages = [
		'COOK_170424031.jpg',
		'COOK_170424008.jpg',
		'COOK_170424013.jpg',
		'COOK_170424024.jpg',
		'COOK_170424025.jpg',
		'COOK_170424017.jpg',
		'COOK_170424020.jpg',
		'COOK_170424037.png',
		'COOK_170424054.jpg',
	];
	$primaryImage = $galleryImages[0];
	$secondaryImages = array_slice($galleryImages, 1);
	$secondaryColumns = array_chunk($secondaryImages, ceil(count($secondaryImages) / 2));
@endphp

<div class="container">
	<div class="gallery-block">
		<div class="d-none d-md-block">
			<div class="pswp-gallery" id="gallery--table-dhote">
				<div class="row g-4 align-items-stretch">
					<div class="col-lg-3">
					@foreach ($secondaryColumns[0] as $img)
						<a class="d-block overflow-hidden border-round-sm mb-3"
							href="{{ asset('img/15/' . $img) }}" data-pswp-width="2500"
							data-pswp-height="1667" target="_blank">
							<img src="{{ asset('img/15/' . $img) }}"
								alt="Table d’hôte secondaire"
								class="img-fluid w-100 border-round-sm object-fit-cover">
						</a>
					@endforeach
				</div>
				<div class="col-lg-6">
					<a class="d-block overflow-hidden border-round-sm h-100"
						href="{{ asset('img/15/' . $primaryImage) }}" data-pswp-width="2500"
						data-pswp-height="1667" target="_blank">
						<img src="{{ asset('img/15/' . $primaryImage) }}"
							alt="Table d’hôte gastronomique principale" class="img-fluid w-100 h-100 border-round-sm object-fit-cover">
					</a>
				</div>
				<div class="col-lg-3">
					@foreach ($secondaryColumns[1] as $img)
						<a class="d-block overflow-hidden border-round-sm mb-3"
							href="{{ asset('img/15/' . $img) }}" data-pswp-width="2500"
							data-pswp-height="1667" target="_blank">
							<img src="{{ asset('img/15/' . $img) }}"
								alt="Table d’hôte secondaire"
								class="img-fluid w-100 border-round-sm object-fit-cover">
						</a>
					@endforeach
				</div>
			</div>
		</div>
	</div>

	<div class="gallery-mobile d-md-none mt-3">
		<div class="px-0">
			<div id="slider-table-dhote" class="my-slider">
				<div class="slider-wrapper">
					@foreach ($galleryImages as $img)
						<div>
							<img src="{{ asset('img/15/' . $img) }}" alt="Table d’hôte mobile {{ $loop->iteration }}"
								class="img-fluid border-round-sm w-100">
						</div>
					@endforeach
				</div>
			</div>
			<div id="custom-controls-table-dhote" class="custom-controls text-center mt-2">
				<button type="button" class="btn btn-green prev mx-2"><i class="bi bi-arrow-left"></i></button>
				<button type="button" class="btn btn-green next mx-2"><i class="bi bi-arrow-right"></i></button>
			</div>
		</div>
	</div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		tns({
			container: '#slider-table-dhote .slider-wrapper',
			items: 1,
			loop: false,
			mouseDrag: true,
			swipeAngle: false,
			speed: 400,
			responsive: {
				400: { items: 1 },
				750: { items: 2 }
			},
			controls: true,
			nav: false,
			controlsContainer: '#custom-controls-table-dhote'
		});
	});
</script>