<a mat-button routerLink="../"><mat-icon>arrow_back</mat-icon>Mehr</a>
<header>
  <p class="eyebrow">Teamregeln</p>
  <h1>Strafenkatalog</h1>
  <p>Klare Regeln, transparent für das ganze Team.</p>
</header>
@if (canManage()) {
  <mat-card class="create-card"
    ><form [formGroup]="form" (ngSubmit)="createPenalty()">
      <mat-form-field appearance="outline"
        ><mat-label>Beschreibung</mat-label><input matInput formControlName="description"
      /></mat-form-field>
      <mat-form-field appearance="outline"
        ><mat-label>Betrag</mat-label
        ><input matInput type="number" min="0.01" step="0.01" formControlName="amount" /><span
          matTextSuffix
          >€</span
        ></mat-form-field
      >
      <button mat-flat-button type="submit" [disabled]="form.invalid || saving()">
        <mat-icon>add</mat-icon>Eintrag anlegen
      </button>
    </form></mat-card
  >
}
<mat-form-field appearance="outline" class="search"
  ><mat-label>Strafen durchsuchen</mat-label><mat-icon matPrefix>search</mat-icon
  ><input matInput [value]="search()" (input)="search.set($any($event.target).value)"
/></mat-form-field>
@if (loading()) {
  <div class="state"><mat-spinner diameter="36" /></div>
} @else if (filteredPenalties().length === 0) {
  <div class="state"><mat-icon>gavel</mat-icon><span>Keine Einträge gefunden.</span></div>
} @else {
  <div class="catalog">
    @for (penalty of filteredPenalties(); track penalty.id) {
      <mat-card
        ><span>{{ penalty.description }}</span
        ><strong>{{ penalty.amount | currency: 'EUR' }}</strong></mat-card
      >
    }
  </div>
}
