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

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

{#if applicationStore.tasksToDo.length > 0}
	<div class="card p-3 rounded-lg flex flex-col">
		<h1>Tasks To Do</h1>
		<div class="overflow-auto flex-grow">
			{#each applicationStore.tasksToDo as item}
				<button
					class="card p-2 my-2 bg-slate-100 w-full text-left"
					onclick={() => {
						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>
						<a
							href={item.url}
							class="text-violet-600 overflow-hidden whitespace-nowrap block"
						>
							{item.url}
						</a>
					</div>
				</button>
			{/each}
		</div>
	</div>
{/if}
