@if ((isXsOrSm$ | async)) {
  <div class="input-group mb-2">
    <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}"
      [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
  </div>
}
<div class="input-group mb-5">
  @if ((isXsOrSm$ | async) !== true) {
    <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
  }
  <div [ngClass]="{'input-group-append': (isXsOrSm$ | async) !== true}" ngbDropdown role="group">
    <button [attr.aria-label]="'submission.import-external.search.source.hint' |translate"
      class="btn btn-outline-secondary w-fx"
      title="{{'submission.import-external.search.source.hint' |translate}}"
      ngbDropdownToggle>
      {{'submission.import-external.source.' + selectedElement?.name | translate}}
    </button>
    <ul ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
      aria-haspopup="true"
      aria-expanded="false">
      <li class="scrollable-menu"
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        (scrolled)="onScroll()"
        [scrollWindow]="false">
        @for (source of sourceList; track source) {
          <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)"
            >{{ 'submission.import-external.source.' + source?.name | translate }}
          </button>
        }
        @if (sourceListLoading) {
          <div ngbDropdownItem class="scrollable-dropdown-loading text-center"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
        }
      </li>
    </ul>
    <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):''"
      [dsBtnDisabled]="searchString === ''" (click)="search()">{{ 'submission.import-external.search.button' | translate }}
    </button>
  </div>
