<div class="container-fluid p-0" style="min-height: 95vh; max-height: 100%;">
  <app-navegavate-back></app-navegavate-back>
  <div *ngIf="categories$ | async as categories" class="d-flex justify-content-center flex-wrap">
    <div *ngFor="let category of categories" class="p-4">
      <div class="card" style="width: 20rem;">
        <div class="card-body d-flex ">
          <div class="d-flex flex-column flex-fill">
            <h5 class="card-title">{{category.name}}</h5>
            <p class="card-text">{{category.numberOfRecipes}} receitas</p>
            <div>
              <button [routerLink]="['/categories', category.id]" type="button" class="btn btn-primary">
                Ver receitas
              </button>
            </div>
          </div>
          <div class="d-flex justify-content-end align-items-center">
            <img src="{{category.icon}}" class="icon-category" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
