<!--
  -   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 {Avatar} from "flowbite-svelte";
    import type {ExtendedEvent} from "@type/event.ts";

  interface Props {
    data: ExtendedEvent;
  }

  let { data }: Props = $props();
</script>
<div class="m-4">
    {#each data.teams as team (team.id)}
        <div class="flex flex-row my-2">
            <Avatar size="lg">{team.kuerzel}</Avatar>
            <div class="m-2">
                <h1 class="text-2xl">{team.name}</h1>
                <h2 class="text-lg text-gray-400">
                    Fights: {data.fights.filter(value => value.blueTeam.id === team.id || value.redTeam.id === team.id).length}</h2>
            </div>
        </div>
    {/each}
</div>

<svelte:head>
    <title>{data.event.name} - Teams</title>
</svelte:head>
