<app-default-layout>
  <section class="recipe">
    <section class="hero">
      <app-go-back></app-go-back>

      <div
        class="recipe__picture"
        [ngStyle]="{
          'background-image': 'url(' + recipe.pictureUrl + ')'
        }"
      ></div>

      <div class="recipe__informations">
        <div *ngIf="isRecipeAuthor" class="author__options">
          <app-button (onClick)="goToEdit()"> Editar </app-button>
          <app-button
            type="secondary"
            (onClick)="isModalConfirmExclusionOpen = true"
          >
            Excluir
          </app-button>
        </div>

        <header class="recipe__data">
          <div>
            <h1 class="h3">{{ recipe.name }}</h1>
            <a [routerLink]="['/app/profile/', recipe.creator]" class="l4"
              >@{{ recipe.creator }}</a
            >
          </div>

          <app-favorite-button
            [isLiked]="recipe.isLiked"
            (onClick)="toggleLike()"
          ></app-favorite-button>
        </header>

        <ul class="recipe__tags">
          <li *ngFor="let tag of recipe.tags">
            <app-chip (onClick)="redirectToFilteredRecipes(tag.id)"
              >#{{ tag.name }}</app-chip
            >
          </li>
        </ul>

        <div class="recipe__topics">
          <app-button type="tertiary">
            <div class="recipe__topic">
              <app-icon name="heart-outline" [size]="24"></app-icon>

              <p class="p5">Favoritos</p>
              <p class="h6">{{ recipe.likes }} curtidas</p>
            </div>
          </app-button>

          <app-button type="tertiary">
            <div class="recipe__topic">
              <app-icon name="serving" [size]="24"></app-icon>

              <p class="p5">Rendimento</p>
              <p class="h6">{{ recipe.servings }} {{ recipe.servings > 1 ? 'porções' : 'porção' }}</p>
            </div>
          </app-button>

          <app-button
            type="tertiary"
            title="Abrir informações nutricionais"
            (onClick)="openModalNutrients()"
          >
            <div class="recipe__topic clickable">
              <app-icon name="nutrients" [size]="24"></app-icon>

              <p class="p5">Nutrientes</p>
              <p class="h6">{{ recipe.kcal }}kcal</p>
            </div>
          </app-button>
        </div>
      </div>
    </section>

    <section class="recipe__description">
      <section class="recipe__ingredients">
        <h1 class="h4">Ingredientes:</h1>

        <ul class="ingredients__list">
          <li
            *ngFor="let ingredient of recipe.ingredients; index as i"
            class="recipe__ingredient p5"
          >
            <span class="number h2">{{ i + 1 }}</span>
            <p class="ingredient__description p5">
              {{ ingredient.quantity }}g
              {{ ingredient.name.replaceAll(",", "") }}
            </p>
          </li>
        </ul>
      </section>

      <section class="recipe__steps">
        <h1 class="h4">Modo de Preparo:</h1>

        <ol class="steps__list">
          <li
            *ngFor="let step of recipe.stepBySteps; index as i"
            class="recipe__step p5"
          >
            <span class="number h2">{{ i + 1 }}</span>
            <p class="step__description p5">
              {{ step.description }}
            </p>
          </li>
        </ol>
      </section>
    </section>
  </section>

  <app-nutritional-informations
    [(isVisible)]="isModalNutrientsOpen"
    [ingredients]="recipeIngredients"
    [servings]="recipe.servings"
  ></app-nutritional-informations>

  <app-confirm-modal
    [(isVisible)]="isModalConfirmExclusionOpen"
    title="Excluir receita"
    description="Tem certeza de que deseja excluir esta receita? A exclusão não pode ser desfeita e todos os dados relacionados a esta receita serão perdidos permanentemente. Por favor, confirme sua escolha para continuar."
    (onConfirm)="excludeRecipe()"
  ></app-confirm-modal>
</app-default-layout>
