<section class="overview-page">
  <header>
    <p class="eyebrow">Teamübersicht</p>
    <h1>{{ team()?.name ?? 'TeamWallet' }}</h1>
  </header>
  <div class="balance-grid">
    <mat-card class="balance-card balance-card--primary"
      ><mat-card-content
        ><span>Teamkasse</span><strong>{{ team()?.balance ?? 0 | currency: 'EUR' }}</strong
        ><small>Verfügbarer Kassenstand</small></mat-card-content
      ></mat-card
    >
    <mat-card class="balance-card"
      ><mat-card-content
        ><span>Offene Beiträge</span
        ><strong>{{ team()?.outstanding ?? 0 | currency: 'EUR' }}</strong
        ><small>Summe aktiver Mitglieder</small></mat-card-content
      ></mat-card
    >
  </div>
  <div class="section-heading">
    <div>
      <p class="eyebrow">Zuletzt passiert</p>
      <h2>Aktivitäten</h2>
    </div>
  </div>
  @if (loadingActivities()) {
    <div class="state"><mat-spinner diameter="32" /></div>
  } @else if (activities().length === 0) {
    <div class="state">
      <mat-icon>receipt_long</mat-icon><strong>Noch keine Buchungen</strong
      ><span>Neue Aktivitäten erscheinen hier.</span>
    </div>
  } @else {
    <div class="activity-list">
      @for (activity of activities(); track activity.id) {
        <article class="activity">
          <div class="activity__icon">
            <mat-icon>{{ activityIcon(activity) }}</mat-icon>
          </div>
          <div class="activity__copy">
            <strong>{{ activity.playerName ?? 'Teamkasse' }}</strong
            ><span>{{ activity.note || activity.type }}</span
            ><small>{{ activity.date | date: 'dd.MM.yyyy' }}</small>
          </div>
          <strong class="activity__amount" [class.negative]="displayAmount(activity) < 0">{{
            displayAmount(activity) | currency: 'EUR'
          }}</strong>
        </article>
      }
    </div>
  }
</section>
