<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1 id="header" class="pb-2">{{'submission.import-external.title' + ((label) ? '.' + label : '') | translate}}</h1>
      <ds-submission-import-external-searchbar
        [initExternalSourceData]="reload$.value"
        (externalSourceData) = "getExternalSourceData($event)">
      </ds-submission-import-external-searchbar>
    </div>
  </div>
  @if (reload$.value.entity) {
    <div class="row">
      @if (reload$.value.sourceId !== '') {
        <div class="col-md-12">
          <ng-container *ngVar="(entriesRD$ | async) as entriesRD">
            @if (entriesRD && entriesRD?.payload?.page?.length !== 0) {
              <h2>{{ 'submission.sections.describe.relationship-lookup.selection-tab.title' | translate}}</h2>
            }
            @if (entriesRD?.hasSucceeded && (isLoading$ | async) !== true && entriesRD?.payload?.page?.length > 0) {
              <ds-viewable-collection @fadeIn
                [objects]="entriesRD"
                [selectionConfig]="{ repeatable: repeatable, listId: listId }"
                [config]="initialPagination"
                [hideGear]="true"
                [context]="context"
                [importable]="true"
                [importConfig]="importConfig"
                (importObject)="import($event)">
              </ds-viewable-collection>
            }
            @if ((isLoading$ | async)) {
              <ds-loading
              message="{{'loading.search-results' | translate}}"></ds-loading>
            }
            @if ((isLoading$ | async) !== true && entriesRD?.payload?.page?.length === 0 && routeData?.query?.length > 0) {
              <div data-test="empty-external-entry-list">
                <ds-alert [type]="AlertType.Info">{{ 'search.results.empty' | translate }}</ds-alert>
              </div>
            }
            @if ((isLoading$ | async) !== true && entriesRD.statusCode === 500) {
              <div data-test="empty-external-error-500">
                <ds-alert [type]="AlertType.Info">{{ 'search.results.response.500' | translate }}</ds-alert>
              </div>
            }
          </ng-container>
        </div>
      }
      @if (reload$.value.sourceId === '') {
        <div class="col-md-12">
          <ds-alert [type]="AlertType.Info">
            <p class="lead mb-0">{{'submission.import-external.page.hint' | translate}}</p>
          </ds-alert>
        </div>
      }
    </div>
  }

  <div class="row">
    <div class="col-md-12">
      <hr>
        <a class="btn btn-outline-secondary" [routerLink]="['/mydspace']" role="button">
          <i class="fa fa-chevron-left" aria-hidden="true"></i> {{'submission.import-external.back-to-my-dspace' | translate}}
        </a>
      </div>
    </div>
  </div>
