<header class="public-header">
  <a class="brand" [routerLink]="['/t', token]"
    ><mat-icon>account_balance_wallet</mat-icon><span>TeamWallet</span></a
  ><a mat-stroked-button routerLink="/auth/login"><mat-icon>login</mat-icon>Anmelden</a>
</header>
<main>
  <a mat-button [routerLink]="['/t', token]"><mat-icon>arrow_back</mat-icon>Zur Teamübersicht</a>
  <header class="page-title">
    <p class="eyebrow">Öffentliche Ansicht</p>
    <h1>{{ player()?.firstName }} {{ player()?.lastName }}</h1>
    <p>Die letzten Buchungen dieses Mitglieds.</p>
  </header>
  @if (loading()) {
    <div class="state"><mat-spinner diameter="40" /></div>
  } @else if (notFound()) {
    <div class="state"><mat-icon>search_off</mat-icon><span>Verlauf nicht gefunden.</span></div>
  } @else if (transactions().length === 0) {
    <div class="state">
      <mat-icon>receipt_long</mat-icon><span>Noch keine Buchungen vorhanden.</span>
    </div>
  } @else {
    <div class="transactions">
      @for (transaction of transactions(); track transaction.id) {
        <mat-card
          ><div class="icon"><mat-icon>receipt_long</mat-icon></div>
          <div>
            <strong>{{ typeLabel(transaction) }}</strong
            ><span>{{ transaction.date | date: 'dd.MM.yyyy' }}</span>
            @if (transaction.note) {
              <small>{{ transaction.note }}</small>
            }
          </div>
          <strong class="amount">{{
            displayAmount(transaction) | currency: 'EUR'
          }}</strong></mat-card
        >
      }
    </div>
  }
</main>
