<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}
  <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>
  <div>&nbsp;</div>
{/each}
