<script lang="ts">
  import type { Team } from "../model/models";
  import { removeEv } from "./removeEv";
  import WithInlineHeader from "./WithInlineHeader.svelte";

  const { teams }: { teams: Team[] } = $props();

  const sortedTeams = [...teams].sort(
    (a, b) =>
      (a.startnummer ?? 99999) - (b.startnummer ?? 99999) ||
      a.bezeichnung.localeCompare(b.bezeichnung)
  );
</script>

<h3>Teilnehmer</h3>
{#each sortedTeams as team}
  {#if team.zurueckgezogen}
    <div style="color: gray;">
      <b style="text-decoration: line-through;">
        {team.startnummer || ""} &nbsp;{removeEv(team.bezeichnung)}
      </b>
      <br />
      <small>(Team tritt nicht an, Startnummer bleibt erhalten)</small>
    </div>
  {:else}
    <div>
      <b>
        {team.startnummer || ""} &nbsp;{removeEv(team.bezeichnung)}
      </b>
    </div>
    {#if !team.bezeichnung.includes(removeEv(team.formationsgemeinschaft || team.verein || ""))}
      <WithInlineHeader header="Verein" value={team.verein} />
    {/if}
    <WithInlineHeader header="Trainer" value={team.trainer} />
    <WithInlineHeader header="Webseite" value={team.webseite}>
      <a href={team.webseite} target="_blank">{team.webseite}</a>
    </WithInlineHeader>
  {/if}
  <div>&nbsp;</div>
{/each}
