Warning modal

frontend/src/lib/components/CollectionCard.svelte

@@ -14,6 +14,7 @@
 
 	import Plus from '~icons/mdi/plus';
 	import { json } from '@sveltejs/kit';
+	import DeleteWarning from './DeleteWarning.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -60,8 +61,21 @@
 			console.log('Error deleting adventure');
 		}
 	}
+
+	let isWarningModalOpen: boolean = false;
 </script>
 
+{#if isWarningModalOpen}
+	<DeleteWarning
+		title="Delete Collection"
+		button_text="Delete"
+		description="Are you sure you want to delete this collection? This action cannot be undone."
+		is_warning={true}
+		on:close={() => (isWarningModalOpen = false)}
+		on:confirm={deleteCollection}
+	/>
+{/if}
+
 <div
 	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
@@ -90,7 +104,7 @@
 		</div>
 		<div class="card-actions justify-end">
 			{#if type != 'link'}
-				<button on:click={deleteCollection} class="btn btn-secondary"
+				<button on:click={() => (isWarningModalOpen = true)} class="btn btn-secondary"
 					><TrashCanOutline class="w-5 h-5 mr-1" /></button
 				>
 				{#if !collection.is_archived}

frontend/src/lib/components/DeleteWarning.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+
+	export let title: string;
+	export let button_text: string;
+	export let description: string;
+	export let is_warning: boolean;
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function confirm() {
+		dispatch('close');
+		dispatch('confirm');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+</script>
+
+<dialog id="my_modal_1" class="modal {is_warning ? 'bg-primary' : ''}">
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">{title}</h3>
+		<p class="py-1 mb-4">{description}</p>
+		<button class="btn btn-warning mr-2" on:click={confirm}>{button_text}</button>
+		<button class="btn btn-neutral" on:click={close}>Cancel</button>
+	</div>
+</dialog>