{% import "macros/images" as images %}
<section class="py-16 xl:py-24">
	<div class="lg:container">
		<article class="relative">
			<!-- Background -->
			<div class="relative z-0 overflow-hidden pointer-events-none background-before aspect-[16/9]">
				{{ images.imagerSrcset(
						block.beforeImage[0],
						'beforeAfter',
						{
							classes: 'object-cover object-center w-full h-full childFull',
						}
					)
				}}
				<h6 class="absolute type-2xl bottom-4 left-4 text-imperial">
					Before
				</h6>
			</div>
			<!-- Foreground -->
			<div class="absolute inset-0 z-10 overflow-hidden pointer-events-none foreground-after aspect-[16/9]">
				<div class="relative w-full h-full">
					{{ images.imagerSrcset(
							block.afterImage[0],
							'beforeAfter',
							{
								classes: 'object-cover object-center w-full h-full childFull',
							}
						)
					}}
					<h6 class="absolute type-2xl bottom-4 right-4 text-imperial">
						After
					</h6>
				</div>
			</div>
			<input type="range"
				min="10"
				max="90"
				value="30"
				class="absolute inset-0 z-20 w-full h-full opacity-0 cursor-move"
				name="slider"
				id="before-after-slider" />
			<div id="slider-handle"
				class="absolute left-0 z-30 p-2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none top-1/2 bg-imperial">
				<svg xmlns="http://www.w3.org/2000/svg"
					class="w-6 h-6 text-white rotate-90"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="2">
					<path stroke-linecap="round"
						stroke-linejoin="round"
						d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
				</svg>
			</div>
		</article>
	</div>
</section>
<script>
	const slider = document.querySelector("#before-after-slider");
	const fImg = document.querySelector(".foreground-after");
	const handle = document.querySelector("#slider-handle");
	fImg.style.clipPath = `polygon(30% 0, 100% 0, 100% 100%, 30% 100%)`;
	handle.style.left = `30%`;

	slider.addEventListener("input", (e) => {
		const value = e.target.value;
		handle.style.left = `${value}%`;
		fImg.style.clipPath = `polygon(${value}% 0, 100% 0, 100% 100%, ${value}% 100%)`;
	});
</script>