<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">
    @if (loading()) {
      <app-skeleton width="100px" height="12px" />
      <app-skeleton width="45%" height="40px" />
      <app-skeleton width="70%" height="14px" />
    } @else {
      <p class="eyebrow">Öffentliche Ansicht</p>
      <h1>{{ player()?.firstName }} {{ player()?.lastName }}</h1>
      <p>Die letzten Buchungen dieses Mitglieds.</p>
    }
  </header>
  @if (loading()) {
    <div role="status" aria-label="Verlauf wird geladen" class="transactions">
      @for (row of skeletonRows; track row) {
        <app-skeleton height="60px" radius="17px" />
      }
    </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>
            <app-transaction-amount
              [amount]="transaction.amount"
              [type]="transaction.type"
              context="player"
            />
          </strong>
        </mat-card>
      }
    </div>
  }
</main>
