<div ngbDropdown
  #sectionAdd="ngbDropdown"
  placement="bottom-right"
  class="d-inline-block"
  [ngClass]="{'w-100': isXs$}">
  @if (hasSections$ | async) {
    <button class="btn btn-outline-primary dropdown-toggle"
      id="sectionControls"
      [dsBtnDisabled]="(hasSections$ | async) !== true"
      [ngClass]="{'w-100': (isXs$ | async)}"
      ngbDropdownToggle>
      {{ 'submission.sections.general.add-more' | translate }} <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
  }
  <div ngbDropdownMenu
    class="sections-dropdown-menu"
    aria-labelledby="sectionControls"
    [ngClass]="{'w-100': (isXs$ | async)}">
    @if ((hasSections$ | async) !== true) {
      <button class="dropdown-item disabled">
        {{ 'submission.sections.general.no-sections' | translate }}
      </button>
    }
    @for (listItem of (sectionList$ | async); track listItem) {
      <button class="dropdown-item" (click)="addSection(listItem.id)">
        {{'submission.sections.'+listItem.header | translate }}
      </button>
    }
  </div>
</div>
