add report admin panel

src/routes/report/[...url_hash]/ReportDraft.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import Textarea from '$lib/components/Input/Textarea.svelte';
+	import Input from '$lib/components/Input/Input.svelte';
+	import { env } from '$env/dynamic/public';
+	import { page } from '$app/stores';
+	import { createEventDispatcher } from 'svelte';
+
+	export let reportedName: string;
+	export let reason: string;
+
+	async function submitReport() {
+		await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_hash}`, {
+			method: 'POST'
+		});
+	}
+
+	let dispatch = createEventDispatcher();
+
+	let submitModal: HTMLDialogElement;
+</script>
+
+<div>
+	<h2 class="text-3xl text-center">Report für <code>{reportedName}</code></h2>
+	<form on:submit|preventDefault={() => submitModal.show()}>
+		<div class="space-y-4 my-4">
+			<div>
+				<Input type="text" value={reason} required={true} pickyWidth={false}>
+					<span slot="label">Report Grund</span>
+				</Input>
+			</div>
+			<div>
+				<Textarea required={true} rows={4} label="Details über den Report Grund" />
+			</div>
+		</div>
+		<div>
+			<Input type="submit" value="Reporten" />
+		</div>
+	</form>
+</div>
+
+<dialog class="modal" bind:this={submitModal}>
+	<form method="dialog" class="modal-box">
+		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		<div>
+			<h3 class="font-roboto font-medium text-xl">Report abschicken?</h3>
+			<div class="my-4">
+				<p>
+					Nach dem Abschicken des Reports wird sich ein Moderator schnellstmöglich darum kümmern.
+				</p>
+			</div>
+			<div class="flex flex-row space-x-1">
+				<Input
+					type="submit"
+					value="Abschicken"
+					on:click={async () => {
+						await submitReport();
+						dispatch('submit');
+					}}
+				/>
+				<Input type="submit" value="Abbrechen" />
+			</div>
+		</div>
+	</form>
+	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+		<button>close</button>
+	</form>
+</dialog>