<div class="row">
  <div class="col-4">
    <h3>{{ 'submission.sections.describe.relationship-lookup.selection-tab.settings' | translate}}</h3>
    <ds-page-size-selector></ds-page-size-selector>
  </div>
  <div class="col-8">
    <ds-search-form [query]="(searchConfigService.paginatedSearchOptions | async)?.query"
      [inPlaceSearch]="true"
      [searchPlaceholder]="'submission.sections.describe.relationship-lookup.selection-tab.search-form.placeholder' | translate">
    </ds-search-form>
    <div>
      <h3>{{ 'submission.sections.describe.relationship-lookup.selection-tab.title.' + externalSource.id | translate}}</h3>
      <ng-container *ngVar="(entriesRD$ | async) as entriesRD">
        @if (entriesRD?.hasSucceeded && !entriesRD?.isLoading && entriesRD?.payload?.page?.length > 0) {
          <ds-viewable-collection @fadeIn
            [objects]="entriesRD"
            [selectionConfig]="{ repeatable: repeatable, listId: listId }"
            [config]="(currentPagination$ |async)"
            [hideGear]="true"
            [context]="context"
            [importable]="true"
            [importConfig]="importConfig"
            (importObject)="import($event)">
          </ds-viewable-collection>
        }
        @if (!entriesRD || entriesRD?.isLoading) {
          <ds-loading
          message="{{'loading.search-results' | translate}}"></ds-loading>
        }
        @if (entriesRD?.hasFailed && (!entriesRD?.errorMessage || entriesRD?.statusCode !== 400)) {
          <ds-error
          message="{{'error.search-results' | translate}}"></ds-error>
        }
        @if (entriesRD?.payload?.page?.length === 0 || entriesRD?.statusCode === 400) {
          <div id="empty-external-entry-list">
            {{ 'search.results.empty' | translate }}
          </div>
        }
      </ng-container>
    </div>
  </div>
</div>
