<!-- @migration-task Error while migrating Svelte code: `<tr>` is invalid inside `<table>` -->
<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import { window } from "./utils.ts";
    import { astroI18n, t } from "astro-i18n";
    import type { EventFight, ExtendedEvent } from "@type/event";
    import "@styles/table.css";

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

    function getWinner(fight: EventFight) {
        if (!fight.hasFinished) {
            return t("announcements.table.notPlayed");
        }

        switch (fight.ergebnis) {
            case 1:
                return fight.blueTeam.kuerzel;
            case 2:
                return fight.redTeam.kuerzel;
            default:
                return t("announcements.table.draw");
        }
    }
</script>

<div class="p-3 bg-gray-200 dark:bg-neutral-800 rounded-2xl w-3/4 mx-auto">
    <table>
        <thead>
            <tr class="font-bold border-b">
                {#each Array(rows) as i (i)}
                    <td>{t("announcements.table.time")}</td>
                    <td>{t("announcements.table.blue")}</td>
                    <td>{t("announcements.table.red")}</td>
                    <td>{t("announcements.table.winner")}</td>
                {/each}
            </tr>
        </thead>
        <tbody>
            {#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows ) as fights}
                <tr>
                    {#each fights as fight (fight.id)}
                        <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>
                        <td>{getWinner(fight)}</td>
                    {/each}
                </tr>
            {/each}
        </tbody>
    </table>
</div>
