  <ng-container *transloco="let t; prefix: 'actionable'">
    @let labelId = 'actions-' + labelBy();
    @if (filteredActions().length > 0) {
      @if (breakpointService.isTabletOrBelow()) {
        <button [disabled]="disabled()" class="btn {{btnClass()}}" id="{{labelId}}"
                (click)="openMobileActionableMenu($event)">
          <span [ngClass]="{'phone-hidden': hideLabelOnMobile()}">{{label()}}</span>
          <i class="fa {{iconClass()}}" aria-hidden="true"></i>
        </button>
      } @else {
        <div ngbDropdown container="body" class="d-inline-block">
          <button [disabled]="disabled()" class="btn {{btnClass()}}" id="{{labelId}}" ngbDropdownToggle
                  (click)="preventEvent($event)">
            <span [ngClass]="{'phone-hidden': hideLabelOnMobile()}">{{label()}}</span>
            <i class="fa {{iconClass()}}" aria-hidden="true"></i>
          </button>
          <div ngbDropdownMenu attr.aria-labelledby="{{labelId}}">
            <ng-container *ngTemplateOutlet="submenu; context: { list: filteredActions(), topLevel: true }" />
          </div>
        </div>
        <ng-template #submenu let-list="list" let-topLevel="topLevel">
          @for(action of list; track action.title) {
            <!-- Non Submenu items -->
            @if (action.children === undefined || action?.children?.length === 0 || action.dynamicList !== undefined) {
              @if (action.dynamicList !== undefined && (action.dynamicList | async | dynamicList); as dList) {
                @for(dynamicItem of dList; track dynamicItem.title) {
                  <button ngbDropdownItem (mouseenter)="closeAllSubmenus(topLevel)" (click)="performDynamicClick($event, action, dynamicItem)">{{dynamicItem.title}}</button>
                }
              } @else {
                <button ngbDropdownItem (mouseenter)="closeAllSubmenus(topLevel)" (click)="performAction($event, action)">{{t(action.title)}}</button>
              }
            } @else {
              @if (shouldRenderSubMenu(action, action.children?.[0].dynamicList | async)) {
                <!-- Submenu items -->
                <div ngbDropdown #subMenuHover="ngbDropdown" placement="right left"
                     (click)="openSubmenu(action.title, subMenuHover)"
                     (mouseenter)="cancelCloseSubmenus(); openSubmenu(action.title, subMenuHover)"
                     (mouseover)="preventEvent($event)"
                     class="submenu-wrapper">

                  <!-- Check to ensure the submenu has items -->
                  @if (willRenderAction(action, this.currentUser()!)) {
                    <button id="actions-{{action.title}}" class="submenu-toggle" ngbDropdownToggle>
                      {{t(action.title)}} <i class="fa-solid fa-angle-right submenu-icon"></i>
                    </button>
                  }

                  <div ngbDropdownMenu attr.aria-labelledby="actions-{{action.title}}">
                    <ng-container *ngTemplateOutlet="submenu; context: { list: action.children, topLevel: false }" />
                  </div>
                </div>
              }
            }
          }
        </ng-template>
      }
    }
  </ng-container>
