<script lang="ts">
    import {eventRepo} from "./repo/repo.ts";
    import {astroI18n} from "astro-i18n";
    import type {ExtendedEvent} from "./types/event.ts";

    export let event: ExtendedEvent;
    export let group: string;
    export let rows: number = 1;

    function window<T>(arr: T[], len: number): T[][] {
        let result: T[][] = [];
        for (let i = 0; i < arr.length; i += len) {
            result.push(arr.slice(i, i + len));
        }
        return result;
    }
</script>

<div>
    <table>
        <tr class="font-bold border-b">
            {#each Array(rows) as _}
                <td>Time</td>
                <td>Blue Team</td>
                <td>Red Team</td>
            {/each}
        </tr>
        {#each window(event.fights.filter(f => f.group === group), rows) as fights}
            <tr>
                {#each fights as fight}
                    <td>{Intl.DateTimeFormat(astroI18n.locale, {
                        hour: "numeric",
                        minute: "numeric",
                    }).format(new Date(fight.start))}</td>
                    <td class:font-bold={fight.ergebnis === 1} class:italic={fight.ergebnis === 3}>{fight.blueTeam.kuerzel}</td>
                    <td class:font-bold={fight.ergebnis === 2} class:italic={fight.ergebnis === 3}>{fight.redTeam.kuerzel}</td>
                {/each}
            </tr>
        {/each}
    </table>
</div>

<style lang="scss">
  table {
    @apply w-full;
  }
  div {
    @apply p-3 bg-gray-200 dark:bg-gray-800 rounded-2xl w-3/4 mx-auto;
  }
</style>