<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>
    <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 [class.negative]="displayAmount(transaction) < 0">{{
              displayAmount(transaction) | currency: 'EUR'
            }}</strong>
          </article>
        }
      </div>
    }
  } @else {
    <div class="state">Mitglied wurde nicht gefunden.</div>
  }
</section>
