@if (tournament) {
  <mat-tab-group animationDuration="0ms" disableRipple="true">
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon>euro</mat-icon>
        &nbsp;Administratie
      </ng-template>

      <table class="table table-hover w-75 m-4">
        <thead>
        <tr>
          <th>Naam</th>
          <th>Onderdelen</th>
          <th>Kosten</th>
          <th>Betaald</th>
          @if (tournament.status == 'ONGOING') {
            <th>Aanwezig</th>
          }
        </tr>
        </thead>
        <tbody>
          @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
            <tr>
              <td>{{ tournamentPlayer.name }}</td>
              <td>
                @for (event of tournamentPlayer.events; track event) {
                  {{ event }}&nbsp;
                }
              </td>
              <td>
                {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }}
              </td>
              <td>
                <mat-slide-toggle [(ngModel)]="tournamentPlayer.paid" (change)="playerPaid($event, tournamentPlayer.playerId)">
                  @if (tournamentPlayer.paid) {
                    Betaald
                  } @else {
                    Nog niet betaald
                  }
                </mat-slide-toggle>
              </td>
              @if (tournament.status == 'ONGOING') {
                <td>
                  <mat-slide-toggle [(ngModel)]="tournamentPlayer.present" (change)="playerPresent($event, tournamentPlayer.playerId)">
                    @if (tournamentPlayer.present) {
                      Aanwezig
                    } @else {
                      Nog niet aanwezig
                    }
                  </mat-slide-toggle>
                </td>
              }
            </tr>
          }
        </tbody>
      </table>
    </mat-tab>
    @if (tournament.status == 'ONGOING') {
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon>group</mat-icon>
          &nbsp;Tellers en invallers
        </ng-template>

        <table class="table table-hover w-75 m-4">
          <thead>
          <tr>
            <th>Naam</th>
            <th>Wedstrijden geteld</th>
            <th>Onderdelen</th>
            <th></th>
          </tr>
          </thead>
          <tbody>
            @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
              <tr>
                <td>{{ tournamentPlayer.name }}</td>
                <td>{{ tournamentPlayer.counts }}</td>
                <td>
                  @for (event of tournamentPlayer.events; track event) {
                    {{ event }}&nbsp;
                  }
                </td>
                <td>
                  <button mat-icon-button [matMenuTriggerFor]="dividedTournamentMenu" class="menu-button">
                    <mat-icon>more_vert</mat-icon>
                  </button>
                  <mat-menu #dividedTournamentMenu="matMenu">
                    <button mat-menu-item (click)="findSubstitute(tournamentPlayer)">
                      <mat-icon>autorenew</mat-icon>
                      Invaller kiezen
                    </button>
                    <button mat-menu-item> <!--(click)="drawTournament()"-->
                      <mat-icon>do_not_disturb_on</mat-icon>
                      Deelname stoppen
                    </button>
                  </mat-menu>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </mat-tab>
    }
  </mat-tab-group>
}