<script lang="ts">
	import { onMount } from 'svelte';
	import { api, type Company } from '$lib/api/client';

	let companies: Company[] = [];
	let loading = true;

	onMount(async () => {
		companies = await api.getCompanies();
		loading = false;
	});
</script>

<svelte:head>
	<title>Strichliste</title>
</svelte:head>

<div class="page-header">
	<h1>Strichliste</h1>
	<p style="color: var(--color-text-muted); margin-top: 4px;">Firma auswählen</p>
</div>

{#if loading}
	<div style="text-align: center; padding: 48px;">
		<p>Laden...</p>
	</div>
{:else}
	<div class="card-grid" style="padding: 24px;">
		{#each companies as company}
			<a href="/company/{company.id}" class="card">
				<div style="font-size: 2.5rem;">🏢</div>
				<h3>{company.name}</h3>
			</a>
		{/each}
	</div>
{/if}
