<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()) {
      <app-button variant="ghost" (click)="clearWishlist()">{{ 'ux.clearWishlist' | translate }}</app-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">
      <app-empty-state [title]="'ux.wishlistEmptyTitle' | translate" [description]="'ux.wishlistEmptyDescription' | translate">
        <div slot="actions">
          <app-button variant="primary" [routerLink]="'/catalog' | langRoute">{{ 'ux.goToCatalog' | translate }}</app-button>
        </div>
      </app-empty-state>
    </section>
  }
</main>
