<script lang="ts">
	import { onMount } from 'svelte';
	import type { CCN } from '$lib/eve';
	import Icon from '@iconify/svelte';
	import CcnListItem from '$lib/components/CCNSelector/CCNListItem.svelte';

	let { ccns, showAddCCNDialog }: { ccns: CCN[]; showAddCCNDialog: () => void } = $props();
	let activeCCN: CCN | null = $state(null);

	onMount(async () => {
		activeCCN = await window.eve.getActiveCCN();
	});
</script>

<ul role="list" class="grid grid-cols-1 gap-2 h-[calc(100vh-4em)] overflow-y-auto">
	{#each ccns as ccn (ccn.publicKey)}
		<CcnListItem {ccn} {activeCCN} />
	{/each}

	<li>
		<button
			type="button"
			class="ccn-btn"
			aria-label="New CCN"
			title="New CCN"
			onclick={showAddCCNDialog}
		>
			<div class="ccn-inner">
				<div class="ccn-avatar">
					<div class="ccn-hex">
						<Icon icon="mdi:plus" class="ccn-icon" />
					</div>
				</div>

				<span class="ccn-name">New CCN</span>
			</div>
		</button>
	</li>
</ul>
