collection-item-mapper.component.html

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2>{{'collection.item-mapper.head' | translate}}</h2>
      <p [innerHTML]="'collection.item-mapper.collection' | translate:{ name: (collectionRD$ | async)?.payload?.name }"></p>
      <p>{{'collection.item-mapper.description' | translate}}</p>

      <div class="row">
        <div class="col-12 col-lg-6">
          <ds-search-form id="search-form"
                          [query]="(searchOptions$ | async)?.query"
                          [scope]="(searchOptions$ | async)?.scope"
                          [currentUrl]="getCurrentUrl()">
          </ds-search-form>
        </div>
      </div>

      <ngb-tabset>
        <ngb-tab title="{{'collection.item-mapper.tabs.browse' | translate}}">
          <ng-template ngbTabContent>
            <ds-viewable-collection
              [config]="(searchOptions$ | async)?.pagination"
              [sortConfig]="(searchOptions$ | async)?.sort"
              [objects]="collectionItemsRD$ | async">
            </ds-viewable-collection>
          </ng-template>
        </ngb-tab>
        <ngb-tab title="{{'collection.item-mapper.tabs.map' | translate}}">
          <ng-template ngbTabContent>
            <ds-item-select [itemsRD$]="mappingItemsRD$" [paginationOptions]="(searchOptions$ | async)?.pagination"></ds-item-select>
          </ng-template>
        </ngb-tab>
      </ngb-tabset>

      <button [routerLink]="['/collections/', (collectionRD$ | async)?.payload?.id]" class="btn btn-outline-secondary">{{'collection.item-mapper.return' | translate}}</button>
    </div>
  </div>
</div>