@if (!item.children) {
  <button
    class="action-button"
    mat-icon-button
    acaActiveLink="action-button--active"
    [action]="item"
    [id]="item.id"
    [attr.aria-label]="item.title | translate"
    [attr.title]="item.description | translate"
    [attr.data-automation-id]="item.id"
    >
    <adf-icon [value]="item.icon" />
  </button>
}

@if (item.children && item.children.length) {
  <button
    [matMenuTriggerFor]="menu"
    [acaMenuPanel]="item"
    #acaMenuPanel="acaMenuPanel"
    mat-icon-button
    [id]="item.id"
    [attr.data-automation-id]="item.id"
    [attr.title]="item.description | translate"
    [attr.aria-label]="item.title | translate"
    class="action-button"
    [ngClass]="{
      'action-button--active': acaMenuPanel.hasActiveChildren
    }"
    >
    <adf-icon [value]="item.icon" />
  </button>
  <mat-menu #menu="matMenu" [overlapTrigger]="false">
    @for (child of item.children; track trackById($index, child)) {
      <button
        acaActiveLink="action-button--active"
        [action]="child"
        [attr.aria-label]="child.title | translate"
        [id]="child.id"
        [attr.title]="child.description | translate"
        [attr.data-automation-id]="child.id"
        mat-menu-item
        class="action-button"
        >
        @if (child.icon) {
          <adf-icon [value]="child.icon" />
        }
        <span class="action-button__label">{{ child.title | translate }}</span>
      </button>
    }
  </mat-menu>
}