<div *ngIf="(recipes) as result" class="d-flex justify-content-around flex-wrap">
  <div *ngFor="let recipe of result" class="card rounded mt-4 mb-4 card-shadow" style="width: 18rem">
    <div class="box-img">
      <img src="{{ recipe.images[0] }}" class="rounded img-card" alt="{{recipe.name}}"
        [routerLink]="['/recipe', recipe.id]" />
      <div class="overlay"></div>
      <div class="button-action">
        <a [routerLink]="['/recipe', recipe.id]" type="button" class="btn btn-primary">Ver receita</a>
      </div>
    </div>
    <div class="card-body">
      <h5 class="card-title fw-bold mb-1 capitalize">{{ recipe.name }}</h5>
      <div class="d-flex justify-content-between pt-2">
        <div class="card-text">
          <i class="bi bi-tag"></i>
          <span>{{recipe.categoryName}}</span>
        </div>
        <div class="card-text">
          <i class="bi bi-bar-chart"></i>
          <span> {{difficulty[recipe.difficulty]}}</span>
        </div>
      </div>
      <div class="d-flex justify-content-between pt-2">
        <div class="card-text">
          <i class="bi bi-pie-chart"></i>
          <span> {{recipe.numberPortion}} porções</span>
        </div>
        <div class="card-text">
          <i class="bi bi-clock"></i>
          <span> {{recipe.preparationTimeInMinutes}} min</span>
        </div>
      </div>
      <div class="d-flex justify-content-between">
        <!--<a [routerLink]="['/recipe', recipe.id]" class="btn btn-outline-primary">Ver receita</a>
        <app-toggle-favorite [isFavorite]="recipe.favorite" [id]="recipe.id"></app-toggle-favorite>-->
      </div>
    </div>
  </div>
  <div *ngIf="result.length === 0">
    <app-not-found messageNotFound="Nenhuma receita encontrada." messageAddRecipe="Vamos adicionar uma receita?">
    </app-not-found>
  </div>
</div>
