<article class="meal-card">
  <div class="meal__description">
    <header class="meal-heading">
      <div>
        <app-icon [name]="mealIcons[meal.mealTime]"></app-icon>
      </div>
      <div>
        <h1 class="h4">{{ meal.mealTime }}</h1>
        <p class="p4">{{ calories }}kcal</p>
      </div>
    </header>

    <app-button
      class="meal__toggle-button"
      [ngStyle]="{
        transform: isOpen ? 'rotate(-180deg)' : 'rotate(0deg)'
      }"
      type="icon"
      icon="chevron-down"
      (onClick)="toggleOpen()"
    ></app-button>
  </div>

  <section
    #informationContainer
    class="meal__informations"
    [class.open]="isOpen"
    [ngStyle]="{
      'max-height': isOpen ? containerHeight + 'px' : '0px'
    }"
  >
    <div class="meal__informations-wrapper">
      <ng-container
        *ngIf="meal.foods.length || meal.recipes.length; else noneMeal"
      >
        <ul *ngIf="meal.foods.length" class="meal__foods">
          <li *ngFor="let food of meal.foods" class="p4">
            {{ food.quantity }}g - {{ food.name.replaceAll(",", "") }} ({{
              food.kcal
            }}kcal)
          </li>
        </ul>

        <ul *ngIf="meal.recipes.length" class="meal__recipes">
          <li *ngFor="let recipe of meal.recipes" class="p4">
            {{ recipe.consumedServings }} {{ recipe.consumedServings > 1 ? 'porções' : 'porção' }} - {{ recipe.name }} ({{
              recipe.consumedKcal
            }}kcal)
          </li>
        </ul>
      </ng-container>

      <ng-template #noneMeal>
        <p class="p3">Nenhum alimento foi registrado</p>
      </ng-template>

      <app-button
        type="primary"
        (onClick)="meal.id ? goToEdit() : goToCreate()"
      >
        {{
          meal.recipes.length > 0 || meal.foods.length > 0
            ? "Editar"
            : "Adicionar"
        }}
      </app-button>
    </div>
  </section>
</article>
