@if (label()) {
  <h4 class="pi-dynamic-menu__label">{{ label() | translate }}</h4>
}

<ul class="pi-dynamic-menu__entries">
  @for (entry of menuItems(); track trackByFn($index, entry); let i = $index) {
    <li
      class="pi-dynamic-menu__entry"
      [class.is-active]="entry.isActive"
      [class.is-disabled]="entry.isDisabled"
      [class.is-expanded]="isExpanded(i)"
    >
      <!-- Nivel 0. El template del consumidor, si lo hay, manda. -->
      @if (parentMenuTemplateRef()) {
        <ng-container
          [ngTemplateOutlet]="parentMenuTemplateRef()!"
          [ngTemplateOutletContext]="{ $implicit: entry, index: i }"
        />
      } @else {
        <button
          type="button"
          class="pi-dynamic-menu__button"
          [disabled]="entry.isDisabled"
          [attr.aria-expanded]="hasChildren(entry) ? isExpanded(i) : null"
          (click)="onEntryClick(entry, i)"
        >
          @if (iconOf(entry)) {
            <pi-icon
              [icon]="iconOf(entry)!"
              [color]="entry.color ?? 'primary'"
              size="small"
            />
          }
          @if (!isCollapsed()) {
            <span class="pi-dynamic-menu__text">
              <span>{{ labelOf(entry) | translate }}</span>
              @if (descriptionOf(entry); as description) {
                <small>{{ description | translate }}</small>
              }
            </span>

            @if (hasChildren(entry)) {
              <pi-icon
                class="pi-dynamic-menu__chevron"
                icon="chevron-down"
                color="grey"
                size="x-small"
              />
            }
          }
        </button>
      }

      <!-- Nivel 1 -->
      @if (hasChildren(entry) && isExpanded(i) && !isCollapsed()) {
        <ul class="pi-dynamic-menu__children">
          @for (child of entry.entries; track trackByFn($index, child)) {
            <li
              class="pi-dynamic-menu__child"
              [class.is-active]="child.isActive"
              [class.is-disabled]="child.isDisabled"
            >
              @if (childMenuTemplateRef()) {
                <ng-container
                  [ngTemplateOutlet]="childMenuTemplateRef()!"
                  [ngTemplateOutletContext]="{ $implicit: child }"
                />
              } @else {
                <button
                  type="button"
                  class="pi-dynamic-menu__button"
                  [disabled]="child.isDisabled"
                  (click)="selectEntry.emit(child)"
                >
                  @if (iconOf(child)) {
                    <pi-icon
                      [icon]="iconOf(child)!"
                      [color]="child.color ?? 'grey'"
                      size="x-small"
                    />
                  }
                  <span>{{ labelOf(child) | translate }}</span>
                </button>
              }
            </li>
          }
        </ul>
      }
    </li>
  }
</ul>

<!-- Contenido lateral opcional del menú -->
@if (asideMenuTemplateRef()) {
  <ng-container [ngTemplateOutlet]="asideMenuTemplateRef()!" />
}