<main class="wishlist-page page-container">
  <header class="wishlist-head">
    <div>
      <h1>{{ 'ux.wishlistTitle' | translate }}</h1>
      <p>{{ favorites().length }} {{ 'ux.items' | translate }}</p>
    </div>
    @if (hasItems()) {
      <button type="button" class="btn btn-ghost" (click)="clearWishlist()">{{ 'ux.clearWishlist' | translate }}</button>
    }
  </header>

  @if (hasItems()) {
    <section class="wishlist-grid grid grid-4">
      @for (entry of favorites(); track entry.product.itemID) {
        <div class="wishlist-item">
          <app-product-card
            [item]="entry.product"
            [showFavoriteAction]="true"
            [showCompareAction]="false"
            [showShareAction]="false"
            [isFavorite]="true"
            [addToCartLabel]="'catalog.addToCart' | translate"
            (addToCart)="addToCart(entry.product.itemID, $event.event)"
            (favoriteToggled)="removeFromWishlist(entry.product.itemID)" />
        </div>
      }
    </section>
  } @else {
    <section class="wishlist-empty card">
      <h2>{{ 'ux.wishlistEmptyTitle' | translate }}</h2>
      <p>{{ 'ux.wishlistEmptyDescription' | translate }}</p>
      <a [routerLink]="'/catalog' | langRoute" class="btn btn-primary">{{ 'ux.goToCatalog' | translate }}</a>
    </section>
  }
</main>
