@if (loading()) {
  <div class="team-select-loading">
    <mat-spinner diameter="32" />
  </div>
} @else if (players().length === 0) {
  <div class="team-select-empty">
    <p>Du bist noch keinem Team zugeordnet.</p>
  </div>
} @else {
  <div class="team-select-page">
    <h1>Team auswählen</h1>
    <mat-nav-list>
      @for (player of players(); track player.id) {
        <a mat-list-item [routerLink]="['/team', player.team?.id, 'overview']">
          <span matListItemTitle>{{ player.team?.name }}</span>
          <span matListItemLine>{{ player.firstName }} {{ player.lastName }}</span>
        </a>
      }
    </mat-nav-list>
  </div>
}