<div class="subcategories-container">
  @if (loading()) {
    <div class="loading">
      <div class="spinner"></div>
      <p>{{ 'subcategories.loading' | translate }}</p>
    </div>
  }

  @if (error()) {
    <div class="error">
      <p>{{ error() }}</p>
      <button (click)="ngOnInit()">{{ 'subcategories.retry' | translate }}</button>
    </div>
  }

  @if (!loading() && !error()) {
    <header class="sub-header">
      <h2>{{ parentName() }}</h2>
    </header>

    @if (subcategories().length > 0) {
      <div class="categories-grid">
        @for (cat of subcategories(); track trackByCategoryId($index, cat)) {
          <a [routerLink]="['/category', cat.id] | langRoute" class="category-card">
            <div class="category-image">
              @if (cat.icon) {
                <img [src]="cat.icon" [alt]="categoryName(cat)" loading="lazy" decoding="async" />
              } @else {
                <div class="category-fallback">{{ categoryName(cat).charAt(0) }}</div>
              }
            </div>
            <div class="category-info">
              <h3 class="category-name">{{ categoryName(cat) }}</h3>
              <div class="category-meta">
                @if (subcategoryChildCount(cat) > 0) {
                  <span>{{ 'subcategories.childrenCount' | translate:{ count: subcategoryChildCount(cat) } }}</span>
                }
                @if (subcategoryItemCount(cat) > 0) {
                  <span>{{ 'subcategories.productsCount' | translate:{ count: subcategoryItemCount(cat) } }}</span>
                }
              </div>
              @if (subcategoryItemCount(cat) > 0 && subcategoryChildCount(cat) > 0) {
                <span class="category-mixed">{{ 'subcategories.includesProducts' | translate }}</span>
              }
            </div>
          </a>
        }
      </div>
    }

    <!-- Items directly in this category -->
    @if (categoryItems().length > 0) {
      <div class="category-items-section">
        <h3 class="items-section-title">{{ 'subcategories.itemsInCategory' | translate }}</h3>
        <div class="items-grid">
          @for (item of categoryItems(); track trackByItemId($index, item)) {
            <a [routerLink]="['/product', item.itemID] | langRoute" class="item-card">
              <div class="item-image">
                <img [src]="getMainImage(item)" [alt]="itemName(item)" loading="lazy" decoding="async" />
                @if (item.discount > 0) {
                  <span class="item-discount">-{{ item.discount }}%</span>
                }
                @if (item.badges && item.badges.length > 0) {
                  <div class="item-badges">
                    @for (badge of item.badges; track badge) {
                      <span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
                    }
                  </div>
                }
              </div>
              <div class="item-info">
                <h4 class="item-name">{{ itemName(item) }}</h4>
                <div class="item-price">
                  @if (item.discount > 0) {
                    <span class="old-price">{{ item.price }} {{ item.currency }}</span>
                    <span class="current-price">{{ getDiscountedPrice(item) | number:'1.0-0' }} {{ item.currency }}</span>
                  } @else {
                    <span class="current-price">{{ item.price }} {{ item.currency }}</span>
                  }
                </div>
                <button class="item-cart-btn" (click)="addToCart(item.itemID, $event)" [attr.aria-label]="'carousel.addToCart' | translate">
                  <app-icon name="cart" [size]="16" />
                </button>
              </div>
            </a>
          }
        </div>
      </div>
    }

    @if (!hasSubcategories() && categoryItems().length === 0) {
      <div class="no-subcats">
        <div class="no-subcats-icon">
          <app-icon name="layoutGrid" [size]="40" />
        </div>
        <h3>{{ 'subcategories.emptyTitle' | translate }}</h3>
        <p>{{ 'subcategories.emptyDesc' | translate }}</p>
        <a [routerLink]="'/' | langRoute" class="no-subcats-btn">{{ 'subcategories.goHome' | translate }}</a>
      </div>
    }
  }
</div>
