<ng-template #bundleView>
  <div class="row bundle-row">
    <div class="col-6 col-sm-7 col-md-8 col-lg-9 font-weight-bold row-element">{{'item.edit.bitstreams.bundle.name' | translate:{ name: bundle.name } }}</div>
    <div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">
      <div class="btn-group bundle-action-buttons">
        <button [routerLink]="['/items/', item.id, 'bitstreams', 'new']"
                [queryParams]="{bundle: bundle.id}"
                class="btn btn-outline-success btn-sm"
                title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
          <i class="fas fa-upload fa-fw"></i>
        </button>
      </div>
    </div>
  </div>
  <div [id]="bundle.id" class="bundle-bitstreams-list" *ngVar="((updates$ | async) | dsObjectValues) as updateValues" cdkDropList (cdkDropListDropped)="drop($event)">
    <div class="row" *ngFor="let updateValue of updateValues" cdkDrag
         [ngClass]="{
                  'table-warning': updateValue.changeType === 0,
                  'table-danger': updateValue.changeType === 2,
                  'table-success': updateValue.changeType === 1,
                  'bg-white': updateValue.changeType === undefined
                }">
      <ds-item-edit-bitstream [fieldUpdate]="updateValue"
                              [bundleUrl]="bundle.self">
        <button disabled slot="drag-handle" class="drag-handle btn btn-outline-secondary btn-sm" cdkDragHandle>
          <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
        </button>
      </ds-item-edit-bitstream>
    </div>
    <ng-container *ngVar="(bitstreamsRD$ | async) as bitstreamsRD">
      <div class="row" *ngIf="bitstreamsRD?.payload?.elementsPerPage < bitstreamsRD?.payload?.totalElements">
        <ng-container *ngVar="(isLoadingMore$ | async) as loading">
          <div class="col-6 col-sm-7 col-md-8 col-lg-9 row-element" *ngIf="!loading">
            <span class="font-italic">{{'item.edit.bitstreams.bundle.displaying' | translate:{ amount: bitstreamsRD?.payload?.elementsPerPage, total: bitstreamsRD?.payload?.totalElements } }}</span>
          </div>
          <div class="col-6 col-sm-5 col-md-4 col-lg-3 row-element text-center" *ngIf="!loading">
            <a [routerLink]="[]" (click)="loadMore()">{{'item.edit.bitstreams.bundle.load.more' | translate}}</a>
            <span> | </span>
            <a [routerLink]="[]" (click)="loadAll()">{{'item.edit.bitstreams.bundle.load.all' | translate:{ total: bitstreamsRD?.payload?.totalElements } }}</a>
          </div>
          <div class="col-12 row-element text-center" *ngIf="loading">
            <span class="font-italic">{{'loading.bitstreams' | translate}}</span>
          </div>
        </ng-container>
      </div>
    </ng-container>
  </div>
</ng-template>