shouldwork

src/routes/schedule/+page.svelte

@@ -1,5 +1,13 @@
 <script>
 	export let data;
+	let checked = false;
+	function handleClick(event) {
+		if (!checked) {
+			return;
+		}
+		checked = !checked;
+		setTimeout(() => (event.target.checked = checked), 0);
+	}
 	const today = new Date().getDay();
 	let selectedDay = today === 5 || today === 6 || today === 0 ? today : 5;
 	//let selectedDay = 6;
@@ -55,11 +63,26 @@
 			: 'hover:outline-none hover:bg-gray-600'}">Sunday</button
 	>
 </section>
+<section
+	class="text-white body-font bg-black px-2 py-6 md:py-12 flex justify-center flex-row overflow-x-scroll flex-wrap text-sm md:text-base"
+>
+	<label for="Toggle1" class="inline-flex items-center space-x-4 cursor-pointer text-gray-100">
+		<span>Hide</span>
+		<span class="relative">
+			<input id="Toggle1" type="checkbox" class="hidden peer" bind:checked={checked} />
+			<div class="w-10 h-6 rounded-full shadow-inner bg-gray-400 peer-checked:bg-gray-100" />
+			<div
+				class="absolute inset-y-0 left-0 w-4 h-4 m-1 rounded-full shadow peer-checked:right-0 peer-checked:left-auto bg-gray-800"
+			/>
+		</span>
+		<span>Show past events</span>
+	</label>
+</section>
 
 <section class="text-white bg-black body-font overflow-hidden">
 	<div class="container px-5 py-24 mx-auto">
 		{#each filteredEvents as evt}
-			<div class="py-8 divide-y-2 divide-gray-800 {isPast(evt.datetime) && 'hidden'}">
+			<div class="py-8 divide-y-2 divide-gray-800 {isPast(evt.datetime) && !checked && 'hidden'}">
 				<div class=" flex flex-wrap md:flex-nowrap">
 					{#if evt.eventType === 'Catering'}
 						<div class="md:w-64 md:mb-0 flex-shrink-0 flex flex-col border-l-4 border-white pl-2">