<script lang="ts">
    import {Avatar, Navbar, NavBrand, Spinner, TabItem, Tabs} from "flowbite-svelte";
    import EventEdit from "./event/EventEdit.svelte";
    import {ArrowLeftSolid} from "flowbite-svelte-icons";
    import FightList from "./event/FightList.svelte";
    import {eventRepo} from "../../repo/repo.js";
    import TeamList from "./event/TeamList.svelte";

    export let params: { id: number };

    let id = params.id;
    let event = $eventRepo.getEvent(id.toString());
</script>

{#await event}
    <div class="h-screen w-screen grid place-items-center">
        <Spinner size={16}/>
    </div>
{:then data}
    <Navbar let:hidden let:toggle>
        <NavBrand href="#">
            <ArrowLeftSolid></ArrowLeftSolid>
            <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
                {data.event.name}
            </span>
        </NavBrand>
    </Navbar>

    <Tabs style="pill" class="mx-4 flex shadow-lg border-b-2 border-gray-700 pb-2" contentClass="">
        <TabItem open>
            <span slot="title">Event</span>
            <EventEdit {data} />
        </TabItem>
        <TabItem>
            <span slot="title">Teams</span>
            <TeamList {data}/>
        </TabItem>
        <TabItem>
            <span slot="title">Fights</span>
            <FightList {data}/>
        </TabItem>
    </Tabs>
{:catch error}
    <p>
        {error.message}
    </p>
{/await}
