<script lang="ts">
	import Trash from '$lib/icons/Trash.svelte';
	import Folder from '$lib/icons/Folder.svelte';
	import type { PageData } from '../$types';

	export let data: PageData;

	const caseList = data.caseList;

	async function delete_item(ev: Event) {
		let delete_item = window.confirm('Bist du sicher?');

		if (delete_item) {
			const target = ev.currentTarget as HTMLElement | null;
			if (!target) return;
			let filename = target.id.split('del__')[1];
			
			// delete request
			// --------------

			let url = `/api/list/${filename}`;

			try {
				const response = await fetch(url, { method: 'DELETE' });
				if (response.status == 204) {
					setTimeout(() => {
						window.location.reload();
					}, 500);
				}
			} catch (error) {
				if (error instanceof Error) {
					console.log(error.message);
				} else {
					console.log(error);
				}
			}
		}
	}
</script>

<div class="-z-10 bg-white">
	<div class="flex flex-col items-center justify-center w-full">
		<h1 class="text-xl">Liste der Vorgänge</h1>
	</div>
	<div class="mx-auto flex justify-center max-w-7xl h-full">
		<ul role="list" class="divide-y divide-gray-100">
			{#each caseList as item}
				<li>
					<a href="/list/{item.token}?token={item.pw}" class="flex justify-between gap-x-6 py-5">
						<div class="flex gap-x-4">
							<!-- Ordner -->
							<Folder />
							<div class="min-w-0 flex-auto">
								<span class="text-sm font-semibold leading-6 text-gray-900">{item.name}</span>
								<!-- Delete button -->
								<button
									style="padding: 2px"
									id="del__{item.name}"
									on:click|preventDefault={delete_item}
									aria-label="Vorgang {item.name} löschen"
								>
									<Trash />
								</button>
							</div>
						</div>
						<div class="hidden sm:flex sm:flex-col sm:items-end">
							<p class="text-sm leading-6 text-gray-900">Vorgang</p>
						</div>
					</a>
				</li>
			{/each}
		</ul>
	</div>
</div>

<style>
	ul {
		min-width: 24rem;
	}
</style>
