<section class="search-empty-results card" [attr.aria-label]="'search.emptyResultsAria' | translate">
  <h3>{{ 'search.noResults' | translate }}</h3>

  <button type="button" class="reset-btn" (click)="resetFilters.emit()">{{ 'catalog.clearFilters' | translate }}</button>

  @if (popularCategories.length > 0) {
    <div class="block">
      <strong>{{ 'search.popularCategories' | translate }}</strong>
      <div class="chip-list">
        @for (category of popularCategories; track category.id) {
          <button type="button" class="chip" (click)="popularCategorySelected.emit(category.id)">{{ category.label }}</button>
        }
      </div>
    </div>
  }

  @if (popularSearches.length > 0) {
    <div class="block">
      <strong>{{ 'catalog.popularSearchesTitle' | translate }}</strong>
      <div class="chip-list">
        @for (item of popularSearches; track $index) {
          <button type="button" class="chip" (click)="popularSearchSelected.emit(item)">{{ item }}</button>
        }
      </div>
    </div>
  }

  @if (recommendedProducts.length > 0) {
    <div class="block">
      <strong>{{ 'search.recommendedProducts' | translate }}</strong>
      <div class="product-grid">
        @for (product of recommendedProducts; track product.itemID) {
          <app-product-card
            [item]="product"
            [title]="product.name"
            appearance="compact"
            [addToCartLabel]="'catalog.addToCart' | translate"
            (selected)="productSelected.emit(product)"
            (addToCart)="productAddToCart.emit({ product, event: $event.event })" />
        }
      </div>
    </div>
  }
</section>
