<app-default-layout (onContainerInit)="containerRef = $event">
  <header
    class="page-header"
    [ngStyle]="{
      'background-color': filter.liked_only
        ? 'var(--red-100)'
        : 'var(--green-100)'
    }"
  >
    <h1 class="h3">
      {{ filter.liked_only ? "Receitas favoritas" : "+1 Milhão de Receitas" }}
    </h1>

    <div class="header-options">
      <app-search-box
        [(value)]="this.filter.search_by_name"
        (valueChange)="this.debouncedSearch.next($event)"
      >
      </app-search-box>

      <app-favorite-button
        type="counter"
        [likesCount]="favoritesCount"
        [isLiked]="filter.liked_only"
        (onClick)="toggleFavoritesOnly()"
      ></app-favorite-button>
    </div>
  </header>

  <section class="recipes-wrapper">
    <header>
      <app-button
        type="tertiary"
        icon="filter"
        title="Filtrar receitas"
        (onClick)="openModalFilters()"
      >
        Filtros {{ filtersCounter }}
      </app-button>
    </header>

    <ng-container *ngIf="recipes.length; else recipeNotFound">
      <div class="recipes">
        <app-recipe-card
          *ngFor="let recipe of recipes"
          [recipe]="recipe"
          [(isLiked)]="recipe.isLiked"
          (isLikedChange)="handleFavoriteClick(recipe, $event)"
          (onContext)="openRecipeContextMenu($event[0], $event[1])"
        ></app-recipe-card>
      </div>

      <app-paginator
        [(page)]="filter.page"
        [totalPages]="totalPages"
        (pageChange)="fetchRecipes()"
      ></app-paginator>
    </ng-container>

    <ng-template #recipeNotFound>
      <app-recipe-not-found></app-recipe-not-found>
    </ng-template>

    <app-button
      class="float-button create-recipe"
      type="primary"
      title="Criar receita"
      routerLink="/app/foods/create"
    >
      Criar receita
    </app-button>
  </section>

  <app-filter-recipe
    [(isVisible)]="isModalFiltersOpen"
    [(filter)]="filter"
    (onFilter)="fetchRecipes()"
  ></app-filter-recipe>

  <app-recipe-context-menu
    [(isVisible)]="recipeContextMenu.isVisible"
    [recipe]="recipeContextMenu.data"
    [position]="recipeContextMenu.position"
    (onToggleFavorite)="changeFavoritesCounter($event)"
    (onDelete)="fetchRecipes()"
  ></app-recipe-context-menu>

  <app-float-menu [options]="floatMenu.options"></app-float-menu>
</app-default-layout>
