<script lang="ts">
	import {
		ApplicationStatus,
		applicationStore,
		type AsEnum
	} from '$lib/ApplicationsStore.svelte';
	import { get } from '$lib/utils';
	import { onMount, type Snippet } from 'svelte';

	let { children, status }: { children: Snippet; status: AsEnum<typeof ApplicationStatus> } =
		$props();

    let applications = $derived(applicationStore.all.filter((item) => item.status == status))

	onMount(() => {
		applicationStore.loadAll();
	});
</script>

{#if applications.length > 0}
	<div class="card p-3 rounded-lg flex flex-col">
		<h1>{@render children()}</h1>
		<div class="overflow-auto flex-grow">
			{#each applications as item}
				<button
					class="card p-2 my-2 bg-slate-100 w-full text-left"
					onclick={async () => {
                        item.views = await get(`view/${item.id}`);
                        item.events = await get(`events/${item.id}`);

						applicationStore.loadItem = item;
						window.scrollTo({
							top: 0,
							behavior: 'smooth'
						});
					}}
				>
					<div>
						<h2 class="text-lg text-blue-500">
							{item.title}
							{#if item.company}
								<div class="text-violet-800">
									@ {item.company}
								</div>
							{/if}
						</h2>
					</div>
				</button>
			{/each}
		</div>
	</div>
{/if}
