<div class="category-container">
  @if (error()) {
    <div class="error">
      <p>{{ error() }}</p>
      <button (click)="resetAndLoad()">{{ 'category.retry' | translate }}</button>
    </div>
  }

  @if (!error()) {
    <div class="items-grid">
      @for (item of items(); track trackByItemId($index, item)) {
        <app-product-card
          [item]="item"
          [title]="itemName(item)"
          [addToCartLabel]="'category.addToCart' | translate"
          (addToCart)="addToCart($event.itemID, $event.event)"
          (preview)="onItemHover($event)"
        />
      }

      @if (loading() && items().length > 0) {
        @for (i of skeletonSlots; track i) {
          <div class="item-card skeleton-card" aria-hidden="true">
            <div class="item-link">
              <app-skeleton shape="rect" class="item-image" height="auto" />
              <div class="item-details">
                <app-skeleton shape="text" width="80%" height="16px" />
                <app-skeleton shape="text" width="50%" height="12px" />
                <app-skeleton shape="text" width="40%" height="18px" />
                <app-skeleton shape="text" width="60px" height="6px" />
              </div>
            </div>
            <app-skeleton shape="rect" class="skeleton-btn" height="42px" />
          </div>
        }
      }
    </div>

    @if (!hasMore() && items().length > 0) {
      <div class="no-more">
        <p>{{ 'category.allLoaded' | translate }}</p>
      </div>
    }

    @if (items().length === 0 && !loading()) {
      <div class="no-items">
        <div class="no-items-icon">
          <app-icon name="package" [size]="48" />
        </div>
        <h3>{{ 'category.emptyTitle' | translate }}</h3>
        <p>{{ 'category.emptyDesc' | translate }}</p>
        <a [routerLink]="'/' | langRoute" class="no-items-btn">{{ 'category.goHome' | translate }}</a>
      </div>
    }

    @if (loading() && items().length === 0) {
      <div class="loading-initial">
        <div class="spinner"></div>
        <p>{{ 'category.loading' | translate }}</p>
      </div>
    }
  }
</div>
