<div>
  <div
    *ngIf="!(available$ | async)"
    class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">{{ 'submission.sections.general.collection' | translate }}</span>
    </div>
    <div class="input-group-append">
      <span class="input-group-text">{{ selectedCollectionName$ | async }}</span>
    </div>
  </div>
  <div
    ngbDropdown
    #collectionControls="ngbDropdown"
    *ngIf="(available$ | async)"
    class="btn-group input-group"
    (openChange)="toggled($event)">
    <div class="input-group-prepend">
      <span id="collectionControlsMenuLabel" class="input-group-text">
        {{ 'submission.sections.general.collection' | translate }}
      </span>
    </div>
    <button aria-describedby="collectionControlsMenuLabel"
            id="collectionControlsMenuButton"
            class="btn btn-outline-primary"
            (blur)="onClose()"
            (click)="onClose()"
            [disabled]="(processingChange$ | async)"
            ngbDropdownToggle>
      <span *ngIf="(processingChange$ | async)"><i class='fas fa-circle-notch fa-spin'></i></span>
      <span *ngIf="!(processingChange$ | async)">{{ selectedCollectionName$ | async }}</span>
    </button>

    <div ngbDropdownMenu
         class="dropdown-menu"
         id="collectionControlsDropdownMenu"
         aria-labelledby="collectionControlsMenuButton">
      <ds-collection-dropdown
        (selectionChange)="onSelect($event)">
      </ds-collection-dropdown>
    </div>
  </div>
</div>
