<section class="recently-viewed card section">
  <header class="recently-viewed-head">
    <h2>{{ title }}</h2>
    @if (showClear && hasItems()) {
      <button type="button" class="btn btn-ghost" (click)="clear()">{{ 'ux.clearRecentlyViewed' | translate }}</button>
    }
  </header>

  @if (hasItems()) {
    <div class="recently-viewed-grid">
      @for (entry of items(); track entry.product.itemID) {
        <app-product-card
          [item]="entry.product"
          [appearance]="'compact'"
          [showDescription]="false"
          [showStock]="false"
          [showRating]="true"
          [showDiscountBadge]="true"
          [addToCartLabel]="'catalog.addToCart' | translate"
          (addToCart)="addToCart(entry.product.itemID, $event.event)" />
      }
    </div>
  } @else {
    <p class="recently-viewed-empty">{{ 'ux.recentlyViewedEmpty' | translate }}</p>
  }
</section>
