<script lang="ts">
	import { applicationStore } from '$lib/ApplicationsStore.svelte';
	import { onMount } from 'svelte';

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

<div class="card p-3 rounded-lg flex flex-col">
	<h1>Applied</h1>
	<div class="overflow-auto flex-grow">
		{#each applicationStore.applyed as item}
			<div
				class="card p-2 my-2 bg-slate-100"
				draggable="true"
				ondragstart={() => applicationStore.dragStart(item)}
				ondragend={() => {
					window.requestAnimationFrame(() => {
						applicationStore.dragEnd();
					});
				}}
				role="none"
			>
				<div class:animate-pulse={applicationStore.dragging?.id === item.id}>
					<h2 class="text-lg text-blue-500">
						{item.title}
					</h2>
					<a href={item.url} class="text-violet-600 overflow-hidden whitespace-nowrap block">
						{item.url}
					</a>
				</div>
			</div>
		{/each}
	</div>
</div>
