<div class="modal-header">
  <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relationship-lookup.title.' + relationshipOptions.relationshipType) | translate }}</h4>
  <button type="button" [dsBtnDisabled]="isPending" class="btn-close" aria-label="Close button" aria-describedby="modal-title"
    (click)="close()">
  </button>
</div>
<div class="modal-body">
  @if (!item || !collection) {
    <ds-loading></ds-loading>
  }
  @if (item && collection) {
    <ul ngbNav #nav="ngbNav" class="nav-tabs">
      <li ngbNavItem role="presentation">
        <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : { count: (totalInternal$ | async)} }}</a>
        <ng-template ngbNavContent>
          <ds-dynamic-lookup-relation-search-tab
            [selection$]="selection$"
            [listId]="listId"
            [relationship]="relationshipOptions"
            [repeatable]="repeatable"
            [context]="context"
            [query]="query"
            [hiddenQuery]="hiddenQuery"
            [relationshipType]="relationshipType"
            [isLeft]="isLeft"
            [item]="item"
            [isEditRelationship]="isEditRelationship"
            [toRemove]="toRemove"
            (selectObject)="select($event)"
            (deselectObject)="deselect($event)"
            (resultFound)="setTotalInternals($event.pageInfo.totalElements)"
            class="d-block pt-3">
          </ds-dynamic-lookup-relation-search-tab>
        </ng-template>
      </li>
      @for (source of (externalSourcesRD$ | async); track source; let idx = $index) {
        <li ngbNavItem role="presentation">
          <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate  : { count: (totalExternal$ | async)?.[idx] } }}</a>
          <ng-template ngbNavContent>
            <ds-dynamic-lookup-relation-external-source-tab
              [label]="label"
              [listId]="listId"
              [repeatable]="repeatable"
              [item]="item"
              [collection]="collection"
              [relationship]="relationshipOptions"
              [context]="context"
              [query]="query"
              [externalSource]="source"
              (importedObject)="imported($event)"
              class="d-block pt-3">
            </ds-dynamic-lookup-relation-external-source-tab>
          </ng-template>
        </li>
      }
      @if (!isEditRelationship) {
        <li ngbNavItem role="presentation">
          <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a>
          <ng-template ngbNavContent>
            <ds-dynamic-lookup-relation-selection-tab
              [selection$]="selection$"
              [listId]="listId"
              [relationshipType]="relationshipOptions.relationshipType"
              [repeatable]="repeatable"
              [context]="context"
              (selectObject)="select($event)"
              (deselectObject)="deselect($event)"
              class="d-block pt-3">
            </ds-dynamic-lookup-relation-selection-tab>
          </ng-template>
        </li>
      }
    </ul>
    <div [ngbNavOutlet]="nav"></div>
  }
</div>
<div class="modal-footer">
  <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
  <div class="d-flex float-end space-children-mr">
    <div class="close-button">
      <button type="button" [dsBtnDisabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
      {{ ('submission.sections.describe.relationship-lookup.close' | translate) }}</button>
    </div>
    @if (isEditRelationship) {
      <button class="btn btn-danger discard"
        [dsBtnDisabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
        (click)="discardEv()">
        <i class="fas fa-times"></i>
        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
      </button>
      <button class="btn btn-primary submit"
        [dsBtnDisabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
        (click)="submitEv()">
        @if (isPending) {
          <span class="spinner-border spinner-border-sm me-1" role="status"
          aria-hidden="true"></span>
        }
        @if (!isPending) {
          <i class="fas fa-save"></i>
        }
        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
      </button>
    }
  </div>
</div>
