Move creator into events structure

src/routes/private/events/creator/steps/StepOverview.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	
+	let { data, event, participants, email, stepConditions } = $props();
+
+	function redirectToFinish() {
+		// Generate a random variable name
+		const varName = 'event_' + Math.random().toString(36).substr(2, 9);
+		// Save the data to sessionStorage
+		sessionStorage.setItem(
+			varName,
+			JSON.stringify({ event, participants, email })
+		);
+		// Redirect with the variable name as a query parameter
+		goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
+	}
+
+</script>
+
+<!-- New Event Overview -->
+<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
+	<ul class="space-y-1">
+		<li><span class="font-semibold">Name:</span> {event.name}</li>
+		<li><span class="font-semibold">Date:</span> {event.date}</li>
+		<li><span class="font-semibold">Description:</span> {event.description}</li>
+	</ul>
+</div>
+
+<!-- Email Overview -->
+<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
+	<div class="mb-2"><span class="font-semibold">Subject:</span> {email.subject}</div>
+	<div class="rounded border bg-gray-50 p-2 whitespace-pre-line text-gray-700">
+		<span class="font-semibold"></span>
+		<div>{email.body}</div>
+	</div>
+</div>
+
+<!-- Participants Overview -->
+<div class="rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 text-xl font-bold">Participants ({participants.length})</h2>
+	<ul class="space-y-1">
+		{#each participants.slice(0, 10) as p}
+			<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
+				<span class="font-semibold">{p.name} {p.surname}</span>
+				<span class="flex-1"></span>
+				<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
+			</li>
+		{/each}
+	</ul>
+	<p class="mt-2 text-sm text-gray-500">Note: Only the first 10 participants are shown.</p>
+</div>
+
+<button
+	onclick={redirectToFinish}
+	class="mt-4 w-full rounded bg-blue-600 px-4 py-3 font-bold text-white
+	transition-colors duration-200 hover:bg-blue-700
+	disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
+	disabled={!stepConditions.every(Boolean)}
+>
+	Generate QR codes and send
+</button>
+
+<div class="mt-2 space-y-1">
+	{#if !stepConditions[0]}
+		<p class="text-sm text-red-500">Please provide an event name before proceeding.</p>
+	{/if}
+	{#if !stepConditions[1]}
+		<p class="text-sm text-red-500">Please add at least one participant before proceeding.</p>
+	{/if}
+	{#if !stepConditions[2]}
+		<p class="text-sm text-red-500">Please provide an email subject before proceeding.</p>
+	{/if}
+	{#if !stepConditions[3]}
+		<p class="text-sm text-red-500">Please provide an email body before proceeding.</p>
+	{/if}
+</div>