<section class="members-page">
  <header class="page-header">
    <div>
      <p>Team</p>
      <h1>Mitglieder</h1>
    </div>
    @if (canManage()) {
      <button mat-flat-button (click)="showCreateForm.set(!showCreateForm())">
        <mat-icon>person_add</mat-icon>Neu
      </button>
    }
  </header>
  @if (showCreateForm()) {
    <mat-card class="create-card"
      ><mat-card-content
        ><h2>Mitglied anlegen</h2>
        <form [formGroup]="createForm" (ngSubmit)="createPlayer()">
          <div class="name-row">
            <mat-form-field appearance="outline"
              ><mat-label>Vorname</mat-label
              ><input matInput formControlName="firstName" /></mat-form-field
            ><mat-form-field appearance="outline"
              ><mat-label>Nachname</mat-label><input matInput formControlName="lastName"
            /></mat-form-field>
          </div>
          <mat-form-field appearance="outline"
            ><mat-label>Rolle</mat-label
            ><mat-select formControlName="teamRole"
              ><mat-option [value]="1">Spieler</mat-option
              ><mat-option [value]="2">2. Kassenwart</mat-option
              ><mat-option [value]="3">Kapitän</mat-option
              ><mat-option [value]="4">Kassenwart</mat-option
              ><mat-option [value]="5">Trainer</mat-option></mat-select
            ></mat-form-field
          >
          <div class="actions">
            <button mat-button type="button" (click)="showCreateForm.set(false)">Abbrechen</button
            ><button mat-flat-button type="submit" [disabled]="createForm.invalid || saving()">
              Anlegen
            </button>
          </div>
        </form></mat-card-content
      ></mat-card
    >
  }
  <div class="filters">
    <mat-form-field appearance="outline" subscriptSizing="dynamic"
      ><mat-label>Mitglieder suchen</mat-label><mat-icon matPrefix>search</mat-icon
      ><input
        matInput
        [value]="search()"
        (input)="search.set($any($event.target).value)" /></mat-form-field
    ><button mat-button (click)="showInactive.set(!showInactive())">
      {{ showInactive() ? 'Nur aktive' : 'Inaktive anzeigen' }}
    </button>
  </div>
  @if (players().length === 0) {
    <div class="empty">
      <mat-icon>group_off</mat-icon><strong>Keine Mitglieder gefunden</strong>
    </div>
  } @else {
    <div class="member-list">
      @for (player of players(); track player.id) {
        <a class="member" [class.inactive]="!player.active" [routerLink]="[player.id]"
          ><div class="avatar">{{ player.firstName.charAt(0) }}{{ player.lastName.charAt(0) }}</div>
          <div class="member__copy">
            <strong>{{ player.firstName }} {{ player.lastName }}</strong
            ><span
              >{{ roleName(player.teamRole?.name) }}
              @if (!player.active) {
                · Inaktiv
              }
            </span>
          </div>
          <strong class="balance" [class.negative]="player.balance < 0">{{
            player.balance | currency: 'EUR'
          }}</strong
          ><mat-icon>chevron_right</mat-icon></a
        >
      }
    </div>
  }
</section>
