@if (open() && categories().length) {
  <section
    class="dropdown-menu show p-2 category-dropdown"
    role="menu"
    aria-label="Categorías"
    (pointerleave)="onPointerLeave($event)"
  >
    <ng-container
      *ngTemplateOutlet="categoryTree; context: { $implicit: categories(), depth: 0 }"
    />
  </section>
}

<ng-template #categoryTree let-nodes let-depth="depth">
  @for (category of nodes; track category.id) {
    <div class="dropdown-submenu" (pointerenter)="onPointerEnter($event, category, depth)">
      <button
        type="button"
        class="dropdown-item d-flex align-items-center justify-content-between gap-3"
        [class.active]="isExpanded(category, depth)"
        role="menuitem"
        [attr.aria-expanded]="category.subcategories.length ? isExpanded(category, depth) : null"
        [attr.aria-controls]="
          category.subcategories.length ? 'store-category-submenu-' + category.id : null
        "
        (focus)="onFocus(category, depth)"
        (click)="selectCategory(category)"
      >
        <span>{{ category.nombre }}</span>
        @if (category.subcategories.length) {
          <i class="fa-solid fa-chevron-right d-none d-md-inline" aria-hidden="true"></i>
        }
      </button>

      @if (isExpanded(category, depth) && category.subcategories.length) {
        <div
          class="dropdown-menu show p-2 category-dropdown__submenu"
          role="menu"
          [id]="'store-category-submenu-' + category.id"
          [attr.aria-label]="'Subcategorías de ' + category.nombre"
        >
          <ng-container
            *ngTemplateOutlet="
              categoryTree;
              context: { $implicit: category.subcategories, depth: depth + 1 }
            "
          />
        </div>
      }
    </div>
  }
</ng-template>