<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">
            <div class="item-link">
              <div class="item-image skeleton-image"></div>
              <div class="item-details">
                <div class="skeleton-line skeleton-title"></div>
                <div class="skeleton-line skeleton-rating"></div>
                <div class="skeleton-line skeleton-price"></div>
                <div class="skeleton-line skeleton-stock"></div>
              </div>
            </div>
            <div class="skeleton-btn"></div>
          </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">
          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 7H4C3.44772 7 3 7.44772 3 8V19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19V8C21 7.44772 20.5523 7 20 7Z" stroke="#a1b4b5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M16 7V5C16 4.46957 15.7893 3.96086 15.4142 3.58579C15.0391 3.21071 14.5304 3 14 3H10C9.46957 3 8.96086 3.21071 8.58579 3.58579C8.21071 3.96086 8 4.46957 8 5V7" stroke="#a1b4b5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 12V16" stroke="#d3dad9" stroke-width="1.5" stroke-linecap="round"/>
            <path d="M10 14H14" stroke="#d3dad9" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
        </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>
