<div class="catalog-category-grid grid grid-4">
  @for (category of categories; track trackByCategoryId($index, category)) {
    <button type="button" class="catalog-category-card" (click)="categorySelected.emit(category)">
      <span class="catalog-category-image">
        @if (category.icon) {
          <img [src]="category.icon" [alt]="category.title" loading="lazy" decoding="async" />
        } @else {
          <span class="catalog-category-fallback">{{ category.title.charAt(0) }}</span>
        }
      </span>
      <span class="catalog-category-content">
        <span class="catalog-category-title">{{ category.title }}</span>
        <span class="catalog-category-meta">
          @if (category.children.length > 0) {
            <span>{{ 'catalog.categoriesCount' | translate:{ count: category.children.length } }}</span>
          }
          @if (category.itemCount > 0) {
            <span>{{ 'catalog.productsCount' | translate:{ count: category.itemCount } }}</span>
          }
        </span>
      </span>
    </button>
  }
</div>
