<section class="category-items" aria-labelledby="category-items-title">
  @if (error()) {
    <p class="alert text-center mb-0 category-items__alert-error">{{ error() }}</p>
  } @else if (results(); as categoryResults) {
    <header class="category-items__header mb-5">
      <h1 id="category-items-title" class="category-items__title mb-0">
        {{ categoryResults.category.nombre }}
      </h1>
    </header>

    @if (!categoryResults.data.length) {
      <p class="alert alert-light border text-center mb-0">
        No hay productos disponibles en esta categoría.
      </p>
    } @else {
      <app-product-list
        [layout]="categoryResults.layout"
        [groupLayout]="paginatedLayout"
        [items]="categoryResults"
        [savingProductIds]="savingProductIds()"
        (buy)="onBuyProduct($event)"
        (addToCart)="onAddToCart($event)"
        (pageChange)="onPageChange($event)"
      />
    }
  }
</section>
