<app-search-bar [(search)]="search" />
<div id="card-list">
  @for (monster of filteredMonsters() ; track monster.name) {
    <app-playing-card [monster]="monster" (click)="openMonster(monster)"/>
  }
</div>

@if (filteredMonsters()?.length === 0) {
  <div class="center">No monsters found!</div>
} @else {
  <div class="center">Found {{filteredMonsters()?.length }} monsters!</div>
}

<div class="center">
  <button mat-flat-button (click)="addMonster()">Add monster</button>
</div>
