<ds-metadata-field-wrapper [label]="label | translate">
  <div *ngVar="(originals$ | async)?.payload as originals">
    @if (hasValuesInBundle(originals)) {
    <div>
      <h3 class="h5 simple-view-element-header">
        {{ "item.page.filesection.original.bundle" | translate }}
      </h3>
      @if (originals?.page?.length > 0) {
      <ds-pagination [hideGear]="true" [hidePagerWhenSinglePage]="true" [paginationOptions]="originalOptions"
        [collectionSize]="originals?.totalElements" [retainScrollPosition]="true">
        @for (file of originals?.page; track file) {
        <div class="file-section row mb-3">
          <div class="col-3">
            <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
          </div>
          <div class="col-7">
            <dl class="row">
              <dt class="col-md-4">
                {{ "item.page.filesection.name" | translate }}
              </dt>
              <dd class="col-md-8">{{ dsoNameService.getName(file) }}</dd>
              <dt class="col-md-4">
                {{ "item.page.filesection.size" | translate }}
              </dt>
              <dd class="col-md-8">{{ file.sizeBytes | dsFileSize }}</dd>
              <dt class="col-md-4">
                {{ "item.page.filesection.format" | translate }}
              </dt>
              <dd class="col-md-8">
                {{ (file.format | async)?.payload?.description }}
              </dd>
              @if (file.hasMetadata('dc.description')) {
              <dt class="col-md-4">
                {{ "item.page.filesection.description" | translate }}
              </dt>
              <dd class="col-md-8">
                {{ file.firstMetadataValue("dc.description") }}
              </dd>
              }
            </dl>
          </div>
          <div class="col-2">
            <ds-file-download-link [showIcon]="true" [bitstream]="file" [item]="item" cssClasses="btn btn-outline-primary btn-download">
              <span class="d-none d-md-inline">
                {{ "item.page.filesection.download" | translate }}
              </span>
            </ds-file-download-link>
          </div>
        </div>
        }
      </ds-pagination>
      }
    </div>
    }
  </div>
  <div *ngVar="(licenses$ | async)?.payload as licenses">
    @if (hasValuesInBundle(licenses)) {
    <div>
      <h3 class="h5 simple-view-element-header">
        {{ "item.page.filesection.license.bundle" | translate }}
      </h3>
      @if (licenses?.page?.length > 0) {
      <ds-pagination [hideGear]="true" [hidePagerWhenSinglePage]="true" [paginationOptions]="licenseOptions"
        [collectionSize]="licenses?.totalElements" [retainScrollPosition]="true">
        @for (file of licenses?.page; track file) {
        <div class="file-section row">
          <div class="col-3">
            <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
          </div>
          <div class="col-7">
            <dl class="row">
              <dt class="col-md-4">
                {{ "item.page.filesection.name" | translate }}
              </dt>
              <dd class="col-md-8">{{ dsoNameService.getName(file) }}</dd>
              <dt class="col-md-4">
                {{ "item.page.filesection.size" | translate }}
              </dt>
              <dd class="col-md-8">{{ file.sizeBytes | dsFileSize }}</dd>
              <dt class="col-md-4">
                {{ "item.page.filesection.format" | translate }}
              </dt>
              <dd class="col-md-8">
                {{ (file.format | async)?.payload?.description }}
              </dd>
              <dt class="col-md-4">
                {{ "item.page.filesection.description" | translate }}
              </dt>
              <dd class="col-md-8">
                {{ file.firstMetadataValue("dc.description") }}
              </dd>
            </dl>
          </div>
          <div class="col-2">
            <ds-file-download-link [showIcon]="true" [bitstream]="file" [item]="item" cssClasses="btn btn-outline-primary btn-download">
              <span class="d-none d-md-inline">
                {{ "item.page.filesection.download" | translate }}
              </span>
            </ds-file-download-link>
          </div>
        </div>
        }
      </ds-pagination>
      }
    </div>
    }
  </div>
</ds-metadata-field-wrapper>
