<section class="catalog-search-results section">
  <div class="results-head">
    <strong>{{ summary }}</strong>
    <span>{{ 'catalog.itemsCount' | translate:{ count: total } }}</span>
  </div>

  @if (loading) {
    <div class="results-skeletons" aria-busy="true">
      @for (_ of [1,2,3,4,5,6,7,8]; track $index) {
        <div class="skeleton-card">
          <app-skeleton shape="rect" height="220px" />
          <app-skeleton shape="text" width="72%" height="16px" />
          <app-skeleton shape="text" width="40%" height="14px" />
        </div>
      }
    </div>
  } @else if (products.length > 0) {
    <app-catalog-product-grid
      [products]="products"
      [layout]="layout"
      [showRatings]="showRatings"
      [showDiscounts]="showDiscounts"
      [showAvailability]="showAvailability"
      [showActionsPlaceholder]="true"
        [showShareAction]="showShareAction"
        [favoriteIds]="favoriteIds"
        [comparedIds]="comparedIds"
      (productSelected)="productSelected.emit($event)"
      (addToCart)="addToCart.emit($event)"
        (productPreview)="productPreview.emit($event)"
        (quickView)="quickView.emit($event)"
        (favoriteToggled)="favoriteToggled.emit($event)"
        (compareToggled)="compareToggled.emit($event)"
        (shareRequested)="shareRequested.emit($event)" />
  } @else {
    <div class="results-empty-state card">
      @if (queryTooShort) {
        <app-empty-state
          [title]="'search.minLength' | translate:{ count: minSearchLength }"
          [description]="null">
          <span slot="icon"><app-icon name="search" [size]="40" /></span>
        </app-empty-state>
      } @else if (searchQuery) {
        <app-empty-state
          [title]="'search.noResults' | translate"
          [description]="('search.noResultsFor' | translate:{ query: searchQuery }) + ' ' + ('search.noResultsHint' | translate)">
          <span slot="icon"><app-icon name="search" [size]="40" /></span>
        </app-empty-state>
      } @else {
        <app-empty-state
          [title]="'catalog.emptyResultsTitle' | translate"
          [description]="'catalog.emptyResultsDescription' | translate">
          <span slot="icon"><app-icon name="search" [size]="40" /></span>
        </app-empty-state>
      }
    </div>
  }

  @if (!loading && loadingStrategy === 'pagination' && totalPages > 1) {
    <div class="results-pager">
      <button type="button" (click)="previous()" [disabled]="page <= 1">{{ 'catalog.previousPage' | translate }}</button>
      <span>{{ 'catalog.pageOf' | translate:{ page: page, total: totalPages } }}</span>
      <button type="button" (click)="next()" [disabled]="page >= totalPages">{{ 'catalog.nextPage' | translate }}</button>
    </div>
  }

  @if (!loading && loadingStrategy === 'loadMore' && hasMore) {
    <div class="results-load-more">
      <button type="button" (click)="onLoadMore()">{{ 'catalog.loadMore' | translate }}</button>
    </div>
  }
</section>
