<script lang="ts">
    import Button from '@/components/ui/button/button.svelte';
    import * as Card from '@/components/ui/card/index.js';
    import * as Table from '@/components/ui/table';
    import AppLayout from '@/layouts/AppLayout.svelte';
    import { type Tournament } from '@/types';

    const breadcrumbs = [
        { title: 'Home', href: '/' },
        { title: 'Tournaments', href: '/tournaments' },
        { title: 'Tournament Name', href: '/tournaments/1' },
    ];

    let { tournament }: { tournament: Tournament } = $props();

    function handleAddTeam() {
        // add a new row to write the team name, on write complete save it
    }
</script>

<AppLayout {breadcrumbs}>
    {JSON.stringify(tournament)}
    <!-- Teams -->
    <Card.Root>
        <Card.Header>
            <Card.Title>Teams</Card.Title>
        </Card.Header>
        <Card.Content>
            <Table.Root>
                <Table.Header>
                    <Table.Row>
                        <Table.Head>Name</Table.Head>
                        <Table.Head>Actions</Table.Head>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {#each tournament.teams as team (team)}
                        <Table.Row>
                            <Table.Cell>{JSON.stringify(team)}</Table.Cell>
                            <Table.Cell>
                                <Button variant="outline">Edit</Button>
                                <Button variant="destructive">Delete</Button>
                            </Table.Cell>
                        </Table.Row>
                    {/each}
                    <Table.Row>
                        <Table.Cell>
                            <Button onsubmit={handleAddTeam} variant="outline">+ Add Team</Button>
                        </Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table.Root>
        </Card.Content>
    </Card.Root>
</AppLayout>
