<section class="search-results" aria-labelledby="search-results-title">
  <header class="search-results__header mb-5">
    <h1 id="search-results-title" class="search-results__title mb-0">Resultados de búsqueda</h1>
    @if (query()) {
      <p class="search-results__subtitle text-body-secondary mb-0">
        Resultados para <strong>“{{ query() }}”</strong>
      </p>
    }
  </header>

  @if (error()) {
    <p class="alert text-center mb-0 search-results__alert-error">{{ error() }}</p>
  } @else if (results(); as searchResults) {
    @if (!searchResults.data.length) {
      <p class="alert alert-light border text-center mb-0">
        No encontramos productos para “{{ query() }}”.
      </p>
    } @else {
      <app-product-list
        [layout]="productLayout()"
        [groupLayout]="groupLayout()"
        [items]="displayItems()"
        [savingProductIds]="savingProductIds()"
        (buy)="onBuyProduct($event)"
        (addToCart)="onAddToCart($event)"
        (pageChange)="onPageChange($event)"
      />

      @if (hasHiddenResults()) {
        <p class="text-body-secondary text-center mt-3 mb-0">
          Se muestran {{ searchResults.data.length }} de {{ searchResults.meta.total }} resultados.
        </p>
      }
    }
  }
</section>
