<div class="container-fluid p-0">
  <div class="light-background">
    <app-navegavate-back></app-navegavate-back>
  </div>

  <!-- Topo -->
  <div class="p-4 light-background">
    <div class="d-flex justify-content-start align-items-center">
      <div class="d-flex p-3 rounded-circle shadow" style="background-color: white;">
        <img src="{{category.icon}}" class="icon-category" style="padding-right: 8px;" />
      </div>
      <div style="padding-left: 15px;">
        <h1 class="fw-bold primary-color mb-0">{{category.name}}</h1>
        <p *ngIf="category.numberOfRecipes != 0; else notRecipe" class="fw-bold">{{category.numberOfRecipes}} receitas
        </p>
        <ng-template #notRecipe>Sem receitas</ng-template>
      </div>
    </div>
  </div>

  <!-- Recipes -->
  <div *ngIf="category.recipes.length; else notrecipe">
    <app-card-recipe [recipes]="category.recipes"> </app-card-recipe>
  </div>

  <ng-template #notrecipe>
    <app-not-found></app-not-found>
  </ng-template>
  <div>
  </div>
</div>
