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