<section class="detail-page">
  <a mat-button routerLink="../"><mat-icon>arrow_back</mat-icon>Mitglieder</a>
  @if (player(); as player) {
    <header>
      <div class="avatar">{{ player.firstName.charAt(0) }}{{ player.lastName.charAt(0) }}</div>
      <div>
        <p>Mitglied</p>
        <h1>{{ player.firstName }} {{ player.lastName }}</h1>
        <span>{{ player.active ? 'Aktiv' : 'Inaktiv' }}</span>
      </div>
      <strong [class.negative]="player.balance < 0">{{ player.balance | currency: 'EUR' }}</strong>
    </header>
    @if (canManage()) {
      <div class="manage-actions">
        <button mat-button type="button" [disabled]="savingActive()" (click)="changeActive()">
          {{ player.active ? 'Deaktivieren' : 'Aktivieren' }}
        </button>
        <mat-form-field appearance="outline" subscriptSizing="dynamic">
          <mat-label>Rolle</mat-label>
          <mat-select
            [value]="player.teamRole?.id ?? 1"
            [disabled]="savingRole()"
            (selectionChange)="changeTeamRole($event.value)"
          >
            <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>
    }
    @if (mutationError(); as error) {
      <p class="error">{{ error }}</p>
    }
    <h2>Buchungsverlauf</h2>
    @if (loading()) {
      <div class="state"><mat-spinner diameter="32" /></div>
    } @else if (transactions().length === 0) {
      <div class="state"><mat-icon>receipt_long</mat-icon><span>Noch keine Buchungen</span></div>
    } @else {
      <div class="history">
        @for (transaction of transactions(); track transaction.id) {
          <article>
            <div>
              <strong>{{ transaction.note || typeName(transaction) }}</strong
              ><span
                >{{ transaction.date | date: 'dd.MM.yyyy' }} · {{ typeName(transaction) }}</span
              >
            </div>
            <strong>
              <app-transaction-amount
                [amount]="transaction.amount"
                [type]="transaction.type"
                context="player"
              />
            </strong>
          </article>
        }
      </div>
    }
  } @else {
    <div class="state">Mitglied wurde nicht gefunden.</div>
  }
</section>
