<script lang="ts">
    import { onMount } from "svelte";
    import type { ExtendedEvent } from "@components/types/event";
    import type { Team } from "@components/types/team";
    import { eventRepo } from "@components/repo/event";

    const {
        event,
    }: {
        event: ExtendedEvent;
    } = $props();

    let teams: Team[] = $state(event.teams);

    const colorMap: Record<string, string> = {
        "0": "#000000",
        "1": "#0000AA",
        "2": "#00AA00",
        "3": "#00AAAA",
        "4": "#AA0000",
        "5": "#AA00AA",
        "6": "#FFAA00",
        "7": "#AAAAAA",
        "8": "#555555",
        "9": "#5555FF",
        a: "#55FF55",
        b: "#55FFFF",
        c: "#FF5555",
        d: "#FF55FF",
        e: "#FFFF55",
        f: "#FFFFFF",
    };

    onMount(async () => {
        teams = await $eventRepo.listTeams(event.event.id.toString());
    });
</script>

<div class="py-2 border-t border-t-gray-600">
    <h1 class="text-2xl font-bold mb-4">Angemeldete Teams</h1>
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
        {#each teams as team}
            <div class="bg-neutral-800 p-2 rounded-md border border-neutral-700 border-l-4 flex flex-row items-center gap-2" style="border-left-color: {colorMap[team.color] || '#FFFFFF'}">
                <span class="text-sm font-mono text-neutral-400 shrink-0 w-8 text-center">{team.kuerzel}</span>
                <span class="font-bold truncate" title={team.name}>
                    {team.name}
                </span>
            </div>
        {/each}
        {#if teams.length === 0}
            <p class="col-span-full text-center text-neutral-400">Keine Teams angemeldet.</p>
        {/if}
    </div>
</div>
