<div class="container-fluid p-4">
  <div class="card">
    <div class="card-body">
      <div class="d-flex justify-content-between p-2">

        <!-- Filter-->
        <div class="input-group input-group-sm " style="width: 500px;">
          <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
          <input type="text" [(ngModel)]="filterName" (ngModelChange)="filterNameRecipe()" class="form-control"
            placeholder="Pesquisar receita por nome..." aria-label="Pesquisar receita por nome..."
            aria-describedby="basic-addon1">
        </div>

        <!-- Display -->
        <select *ngIf="categories$ | async as categories" class="form-select" aria-label="Default select example"
          style="width: 300px;" (change)="onSelected($event)">
          <option selected value="0">Mostrar todos</option>
          <option *ngFor="let category of categories" value="{{category.id}}">
            {{category.name}}</option>
        </select>
      </div>
    </div>
    <div *ngIf="recipes as recipes">
      <app-card-recipe [recipes]="recipes"> </app-card-recipe>
    </div>

    <div *ngIf="!isLoading && !recipes">
      <app-not-found messageNotFound="Ainda não tem nenhuma receita aqui!"
        messageAddRecipe="Vamos criar sua primeira receita?">
      </app-not-found>
    </div>
  </div>
</div>
