<script lang="ts">
	import { resolve } from '$app/paths';
	import * as Table from '$lib/components/ui/table/index.js';
	import * as Card from '$lib/components/ui/card/index.js';
	import { getLibraryState } from '$lib/state/library.svelte';
	import { EllipsisVertical, Plus } from '@lucide/svelte';
	import Button from '$lib/components/ui/button/button.svelte';

	const libraryState = getLibraryState();
</script>

<div class="mb-4 flex items-center justify-between">
	<div>
		<h2 class="text-lg font-semibold">Libraries</h2>
		<p class="text-sm text-muted-foreground">Manage your libraries</p>
	</div>
	<Button variant="outline" onclick={() => libraryState.openLibraryCreateDialog()}>
		<Plus />
		Add Library
	</Button>
</div>

<Card.Root>
	<Card.Content class="p-0">
		<Table.Root>
			<Table.Header>
				<Table.Row>
					<Table.Head class="w-16 pl-4"></Table.Head>
					<Table.Head>Name</Table.Head>
					<Table.Head class="w-16"></Table.Head>
				</Table.Row>
			</Table.Header>
			<Table.Body>
				{#each libraryState.libraries as library (library.id)}
					<Table.Row class="h-14">
						<Table.Cell class="w-16 pl-4 text-center text-lg font-semibold"
							>{library.name[0]}</Table.Cell
						>
						<Table.Cell class="font-medium">
							<a
								href={resolve('/(root)/(library)/library/[libraryId]', {
									libraryId: String(library.id)
								})}
								class="hover:underline">{library.name}</a
							>
						</Table.Cell>
						<Table.Cell class="w-16 text-center">
							<EllipsisVertical class="scale-75" />
						</Table.Cell>
					</Table.Row>
				{/each}
			</Table.Body>
		</Table.Root>
	</Card.Content>
</Card.Root>
