<app-modal
  [title]="'Adicionar ' + (typesLabels[searchType] | lowercase)"
  [(isVisible)]="isVisible"
  (onClose)="handleClose()"
>
  <div class="container">
    <header>
      <app-search-box
        [value]="foodName"
        (onDebounceSearch)="onSearch($event)"
      ></app-search-box>
    </header>

    <div class="content">
      <section class="search-results">
        <div *ngIf="results.length > 0; else notFound">
          <ul>
            <li *ngFor="let food of results">
              <app-food-card
                type="select"
                [isSelected]="food.id === selectedFood?.id"
                [food]="
                  selectedFood && food.id === selectedFood.id
                    ? selectedFood
                    : food
                "
                [canEditFood]="canEdit"
                (onSelect)="handleSelectFood(food)"
                (foodChange)="updateSelectedFood($event)"
              ></app-food-card>
            </li>
          </ul>

          <app-paginator
            [(page)]="page"
            [totalPages]="maxPages"
            (pageChange)="handleSearch(foodName)"
          ></app-paginator>
        </div>

        <ng-template #notFound>
          <ng-container *ngIf="foodName">
            <app-recipe-not-found></app-recipe-not-found>
          </ng-container>
        </ng-template>

        <app-button
          *ngIf="results.length > 0"
          type="primary"
          [isDisabled]="!selectedFood?.id || !selectedFood?.quantity"
          (onClick)="handleAddFood(selectedFood)"
        >
          Adicionar {{ typesLabels[searchType] | lowercase }}
        </app-button>
      </section>

      <aside class="food-options">
        <header>
          <h1 class="h3">
            {{ selectedFood?.name?.replaceAll(',', '') || "Selecione um alimento" }}
          </h1>
        </header>

        <app-nutrition-table
          [servings]="selectedFoodServings"
          [ingredients]="getIngredientsMultiplied()"
          [showOnlyMacro]="true"
        ></app-nutrition-table>
      </aside>
    </div>
  </div>
</app-modal>
