@if (open() && categories().length) {
  <section class="dropdown-menu show p-2 category-dropdown" role="menu" aria-label="Categorías">
    @for (category of categories(); track category.id) {
      <div class="dropdown-submenu">
        <button
          type="button"
          class="dropdown-item d-flex align-items-center justify-content-between gap-3"
          [class.active]="activeCategory()?.id === category.id"
          role="menuitem"
          [attr.aria-expanded]="category.subcategories.length ? activeCategory()?.id === category.id : null"
          (click)="selectCategory(category)"
        >
          <span>{{ category.nombre }}</span>
          @if (category.subcategories.length) {
            <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
          }
        </button>

        @if (activeCategory()?.id === category.id && subcategories().length) {
          <div class="dropdown-menu show p-2 category-dropdown__submenu">
            @for (subcategory of subcategories(); track subcategory.id) {
              <button
                type="button"
                class="dropdown-item d-flex align-items-center justify-content-between gap-3"
                role="menuitem"
                (click)="categorySelect.emit(subcategory)"
              >
                <span>{{ subcategory.nombre }}</span>
                @if (subcategory.subcategories.length) {
                  <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                }
              </button>
            }
          </div>
        }
      </div>
    }
  </section>
}