<script lang="ts">
	import { History } from 'lucide-svelte';
	import { historyDownloads, hydrated } from '$lib/stores';
	import { deleteDownload, retryDownload } from '$lib/actions';
	import DownloadCard from '$lib/components/DownloadCard.svelte';
</script>

<svelte:head><title>PVideoDl — история</title></svelte:head>

<section>
	{#if !$hydrated}
		<p class="py-12 text-center text-sm text-zinc-500">Загрузка…</p>
	{:else if $historyDownloads.length === 0}
		<div class="flex flex-col items-center gap-3 py-16 text-center text-zinc-500">
			<History class="size-10 opacity-40" />
			<p class="text-sm">История пуста — здесь появятся завершённые загрузки.</p>
		</div>
	{:else}
		<div class="flex flex-col gap-3">
			{#each $historyDownloads as download (download.id)}
				<DownloadCard {download} onDelete={deleteDownload} onRetry={retryDownload} />
			{/each}
		</div>
	{/if}
</section>
