@if (hasSubSections$ | async) {
  <div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
    <div class="d-flex flex-row flex-nowrap"
      [ngbTooltip]="itemModel.text | translate" container="body">
      <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [dsBtnDisabled]="section.model?.disabled" role="menuitem" tabindex="0">
        <i class="fas fa-{{section.icon}} fa-fw"></i>
      </button>
      <ul ngbDropdownMenu class="dso-edit-menu-dropdown p-1" role="menu">
        @for (subSection of (subSections$ | async); track subSection) {
          <li class="nav-item nav-link d-flex flex-row p-2" role="presentation">
            @if (renderIcons$ | async) {
              <div class="me-2">
                @if (subSection.icon) {
                  <i class="fas fa-{{subSection.icon}} fa-fw" aria-hidden="true"></i>
                } @else {
                  <i class="fas fa-fw" aria-hidden="true"></i>
                }
              </div>
            }
            <ng-container
              *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
            </ng-container>
          </li>
        }
      </ul>
    </div>
  </div>
}




