<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">
      @for (_ of [1,2,3,4,5,6,7,8]; track $index) {
        <div class="skeleton-card"></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)"
        (favoriteToggled)="favoriteToggled.emit($event)"
        (compareToggled)="compareToggled.emit($event)"
        (shareRequested)="shareRequested.emit($event)" />
  } @else {
    <div class="empty-state card">
      <h3>{{ 'catalog.emptyResultsTitle' | translate }}</h3>
      <p>{{ 'catalog.emptyResultsDescription' | translate }}</p>
    </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>
