<ng-container *ngVar="(dsoRD$ | async) as itemsRD">
  @if (itemsRD?.payload?.totalElements > 0) {
    <ds-pagination
      [paginationOptions]="paginationOptions"
      [sortOptions]="sortOptions"
      [collectionSize]="itemsRD?.payload?.totalElements"
      [hidePagerWhenSinglePage]="true"
      [hideGear]="true">
      <div class="table-responsive mt-2">
        <table id="item-select" class="table table-striped table-hover">
          <thead>
            <tr>
              <th><span class="sr-only">{{'item.select.table.selected' | translate}}</span></th>
              @if (!hideCollection) {
                <th scope="col">{{'item.select.table.collection' | translate}}</th>
              }
              <th scope="col">{{'item.select.table.author' | translate}}</th>
              <th scope="col">{{'item.select.table.title' | translate}}</th>
            </tr>
          </thead>
          <tbody>
            @for (selectItem of selectItems$ | async; track selectItem) {
              <tr>
                <td><input #selectItemBtn [attr.aria-label]="(selectItemBtn.checked ? 'item.select.table.deselect' : 'item.select.table.select') | translate" [disabled]="(selectItem.canSelect$ | async) === false" class="item-checkbox" [ngModel]="selectItem.selected$ | async" (change)="switch(selectItem.dso.id)" type="checkbox" name="{{selectItem.dso.id}}"></td>
                @if (!hideCollection) {
                  <td>
                    <span *ngVar="(selectItem.dso.owningCollection | async)?.payload as collection">
                      @if (collection) {
                        <a [routerLink]="['/collections', collection?.id]">
                          {{ dsoNameService.getName(collection) }}
                        </a>
                      }
                    </span>
                  </td>
                }
                <td>@if (selectItem.dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])) {
                  <span>{{selectItem.dso.firstMetadataValue(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])}}</span>
                }</td>
                <td><a [routerLink]="selectItem.route">{{ dsoNameService.getName(selectItem.dso) }}</a></td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </ds-pagination>
  }
  @if (itemsRD?.payload?.totalElements === 0 || itemsRD?.payload?.page?.length === 0) {
    <div class="alert alert-info w-100" role="alert">
      {{'item.select.empty' | translate}}
    </div>
  }
  @if (itemsRD?.hasFailed) {
    <ds-error message="{{'error.items' | translate}}"></ds-error>
  }
  @if (!itemsRD || itemsRD?.isLoading) {
    <ds-loading message="{{'loading.items' | translate}}"></ds-loading>
  }
  <div *ngVar="(selectedIds$ | async) as selectedIds">
    <button class="btn btn-outline-secondary item-cancel float-start" (click)="onCancel()">{{cancelButton | translate}}</button>
    <button class="btn item-confirm float-end"
      [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
      [dsBtnDisabled]="selectedIds?.length === 0"
      (click)="confirmSelected()">
      {{confirmButton | translate}}
    </button>
  </div>
</ng-container>
