<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>
  @if (loading()) {
    <div class="state"><mat-spinner diameter="42" /><span>Team wird geladen …</span></div>
  } @else if (notFound() || !team()) {
    <div class="state">
      <mat-icon>search_off</mat-icon>
      <h1>Team nicht gefunden</h1>
      <p>Bitte prüfe den öffentlichen Link.</p>
    </div>
  } @else {
    <section class="hero">
      <p class="eyebrow">Öffentliche Teamansicht</p>
      <h1>{{ team()!.name }}</h1>
      <div class="balance-grid">
        <mat-card
          ><span>In der Kasse</span
          ><strong>{{ team()!.balance | currency: 'EUR' }}</strong></mat-card
        >
        <mat-card
          ><span>Ausstehend</span
          ><strong>{{ team()!.outstanding | currency: 'EUR' }}</strong></mat-card
        >
        <mat-card class="total"
          ><span>Theoretischer Gesamtstand</span
          ><strong>{{ team()!.balance + team()!.outstanding | currency: 'EUR' }}</strong></mat-card
        >
      </div>
    </section>
    <section class="content-grid">
      <div>
        <div class="section-heading">
          <div>
            <p class="eyebrow">Mannschaft</p>
            <h2>Mitglieder</h2>
          </div>
          <span>{{ players().length }} aktiv</span>
        </div>
        <mat-form-field appearance="outline" class="search"
          ><mat-label>Mitglied suchen</mat-label><mat-icon matPrefix>search</mat-icon
          ><input matInput [value]="search()" (input)="search.set($any($event.target).value)"
        /></mat-form-field>
        <div class="player-list">
          @for (player of players(); track player.id) {
            <a [routerLink]="['/t', token, player.id]"
              ><span>{{ player.firstName }} {{ player.lastName }}</span
              ><strong>{{ player.balance | currency: 'EUR' }}</strong
              ><mat-icon>chevron_right</mat-icon></a
            >
          } @empty {
            <div class="empty">Keine Mitglieder gefunden.</div>
          }
        </div>
      </div>
      <aside>
        <p class="eyebrow">Teamregeln</p>
        <h2>Strafenkatalog</h2>
        <div class="penalty-list">
          @for (penalty of penalties(); track penalty.id) {
            <mat-card
              ><span>{{ penalty.description }}</span
              ><strong>{{ penalty.amount | currency: 'EUR' }}</strong></mat-card
            >
          } @empty {
            <div class="empty">Keine Einträge vorhanden.</div>
          }
        </div>
      </aside>
    </section>
  }
</main>
