<div class="container-fluid py-4">
  <div class="row justify-content-center">
    <div *ngIf="recipe" class="col-lg-10 col-md-11 ">

      <div class="d-flex justify-content-between pb-3">
        <app-navegavate-back></app-navegavate-back>
        <div>
          <button type="button" class="btn btn-outline-primary me-3" [routerLink]="['/edit', recipe.id]">Editar</button>
          <button type="button" class="btn btn-outline-danger"
            (click)="openModalDeleteRecipe(recipe.id)">Deletar</button>
        </div>
      </div>

      <!-- recipe -->
      <div class="d-flex justify-content-between flex-wrap">
        <div class="d-flex flex-column">
          <div class="d-flex justify-content-between align-items-center">
            <p class="fs-1 m-1 fw-bold text-capitalize text-break">{{recipe.name}}</p>
          </div>
          <p class="m-0">
            <i class="bi bi-tag"></i>
            {{recipe.categoryName}}
          </p>
          <app-rating [rating]="recipe.rating" [id]="recipe.id">
          </app-rating>

          <!--porções, preparo, dificuldade e favorito -->
          <div class="d-flex justify-content-start flex-wrap p-2 mt-2 mb-4" style="background-color: #f0f0f0;">
            <div class="border-end text-center p-1" style="width: 6rem;">
              <p class="m-0">Porções</p>
              <p class="fw-bold m-0 fs-5">{{recipe.numberPortion}} </p>
            </div>

            <div class="border-end text-center p-1" style="width: 6rem;">
              <p class="m-0">Preparo</p>
              <p class="fw-bold m-0 fs-5">{{recipe.preparationTimeInMinutes}} min</p>
            </div>

            <div class="border-end text-center p-1" style="width: 6rem;">
              <p class="m-0">Dificuldade</p>
              <p class="fw-bold m-0 fs-5">{{difficulty[recipe.difficulty]}}</p>
            </div>

            <div class="text-center p-1" style="width: 6rem;">
              <p class=" card-title m-0">Favorito</p>
              <app-toggle-favorite [isFavorite]="recipe.favorite" [id]="recipe.id"></app-toggle-favorite>
            </div>
          </div>
        </div>

        <!-- Carousel -->
        <div>
          <app-carousel [images]="recipe.images" [name]="recipe.name"></app-carousel>
        </div>
      </div>

      <!-- ingredientes -->
      <div>
        <p class="fs-4 m-1 fw-bold">Ingredientes</p>
        <div [innerHtml]="htmlIngredients" style="line-height: 2;"></div>
      </div>

      <!-- modo de preparo-->
      <div>
        <p class="fs-4 m-1 fw-bold">Modo de preparo</p>
        <div [innerHtml]="htmlPreparationMode" style="line-height: 2;"></div>
      </div>
    </div>
  </div>
</div>
