<script lang="ts">
	import * as Table from '$lib/components/ui/table';
	import { Badge } from '$lib/components/ui/badge';
	import { Button } from '$lib/components/ui/button';
	import type { PageData } from './$types';
	import { LucidePlus } from 'lucide-svelte';

	const { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>Clients</title>
</svelte:head>

<Table.Root class="bg-accent rounded-xl">
	<Table.Header>
		<Table.Head>Name</Table.Head>
		<Table.Head>Public Key</Table.Head>
		<Table.Head>Private Key</Table.Head>
		<Table.Head>Pre-Shared Key</Table.Head>
		<Table.Head>IP Allocation</Table.Head>
	</Table.Header>
	<Table.Body>
		{#each data.clients as client}
			<Table.Row class="border-y-2 border-background">
				<Table.Cell>{client.name}</Table.Cell>
				<Table.Cell class="truncate max-w-[10ch]">{client.publicKey}</Table.Cell>
				<Table.Cell class="truncate max-w-[10ch]">{client.privateKey}</Table.Cell>
				<Table.Cell class="truncate max-w-[10ch]">{client.preSharedKey}</Table.Cell>
				<Table.Cell class="flex gap-1">
					{#each client.ips as ip}
						<Badge class="bg-background select-auto" variant="secondary">{ip}</Badge>
					{/each}
				</Table.Cell>
			</Table.Row>
		{/each}
	</Table.Body>
</Table.Root>

<!--Floating action button for adding a new client-->
<form class="self-end mt-auto pt-4" method="post" action="?/create">
	<Button type="submit">
		<LucidePlus />
		Add Client
	</Button>
</form>
