<div class="btn-group">
  <ng-container *ngIf="currentAction">
    <button type="button"
            title="{{ useDisableDesc(currentAction) }}"
            class="btn btn-{{btnColor}}"
            [ngClass]="{'disabled': disableSelectionAction(currentAction)}"
            (click)="useClickAction(currentAction)"
            [disabled]="disableSelectionAction(currentAction)"
            [routerLink]="useRouterLink(currentAction)"
            [attr.aria-label]="currentAction.name"
            [preserveFragment]="currentAction.preserveFragment ? '' : null">
      <i [ngClass]="[currentAction.icon]"></i>
      <span class="action-label">{{ currentAction.name }}</span>
    </button>
  </ng-container>
  <div class="btn-group"
       ngbDropdown
       role="group"
       *ngIf="dropDownActions.length > 1"
       aria-label="Button group with nested dropdown">
    <button aria-label="dropdown-menu-toggle"
            class="btn btn-{{btnColor}} dropdown-toggle"
            ngbDropdownToggle>
      <ng-container *ngIf="dropDownOnly">{{ dropDownOnly }} </ng-container>
      <span *ngIf="!dropDownOnly"
            class="sr-only"></span>
    </button>
    <div class="dropdown-menu"
         ngbDropdownMenu>
      <ng-container *ngFor="let action of dropDownActions">
        <button ngbDropdownItem
                class="{{ toClassName(action) }}"
                title="{{ useDisableDesc(action) }}"
                (click)="useClickAction(action)"
                [routerLink]="useRouterLink(action)"
                [preserveFragment]="action.preserveFragment ? '' : null"
                [disabled]="disableSelectionAction(action)"
                [attr.aria-label]="action.name">
          <i [ngClass]="[action.icon, 'action-icon']"></i>
          <span>{{ action.name }}</span>
        </button>
      </ng-container>
    </div>
  </div>
</div>
