<app-default-layout>
  <app-title title="Perfil"></app-title>

  <section class="profile" *ngIf="user">
    <app-avatar [src]="user.profilePictureUrl!"></app-avatar>

    <div>
      <h4>{{ user.username }}</h4>
      <p class="p5">{{ user.fullName }}</p>
    </div>
  </section>

  <ng-container *ngIf="isPersonalProfile">
    <section class="buttons">
      <app-button
        type="secondary"
        icon="logout"
        href="/logout"
        (click)="openLogoutDialog($event)"
        >Desconectar</app-button
      >
      <app-button type="primary" icon="settings" routerLink="/app/account"
        >Configurações</app-button
      >
    </section>

    <section class="small-buttons">
      <app-button
        type="secondary"
        icon="logout"
        href="/logout"
        (click)="openLogoutDialog($event)"
      ></app-button>
      <app-button
        type="primary"
        icon="settings"
        routerLink="/app/account"
      ></app-button>
    </section>
  </ng-container>

  <section class="recipes-wrapper">
    <header>
      <h4>Minhas Receitas</h4>

      <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"
        ></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>
  </section>

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

<app-confirm-modal
  [(isVisible)]="confirmLogoutIsOpen"
  title="Deseja realmente sair?"
  description="Ao sair da sua conta, você só poderá acessar o aplicativo fazendo login novamente. Tem certeza que deseja sair de sua conta?"
  (onConfirm)="onConfirmLogout()"
></app-confirm-modal>
<app-alert-modal
  [(isVisible)]="confirmedLogout"
  title="Você saiu da sua conta"
  description="Para voltar a acessar o aplicativo você deverá realizar login novamente. Ao confirmar, você será redirecionado para a página de login"
  (onConfirm)="onCloseAlert()"
></app-alert-modal>
