<ds-metadata-field-wrapper [label]="label | translate">
    <div *ngVar="(originals$ | async)?.payload as originals">
        <h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle" | translate}}</h5>
        <ds-pagination *ngIf="originals?.page?.length > 0"
                       [hideGear]="true"
                       [hidePagerWhenSinglePage]="true"
                       [paginationOptions]="originalOptions"
                       [pageInfoState]="originals"
                       [collectionSize]="originals?.totalElements"
                       [disableRouteParameterUpdate]="true"
                       (pageChange)="switchOriginalPage($event)">



            <div class="file-section row" *ngFor="let file of originals?.page;">
                <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">{{file.name}}</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 [href]="file._links.content.href" [download]="file.name">
                        {{"item.page.filesection.download" | translate}}
                    </ds-file-download-link>
                </div>
            </div>
        </ds-pagination>
    </div>

    <div *ngVar="(licenses$ | async)?.payload as licenses">
        <h5 class="simple-view-element-header">{{"item.page.filesection.license.bundle" | translate}}</h5>
        <ds-pagination *ngIf="licenses?.page?.length > 0"
                       [hideGear]="true"
                       [hidePagerWhenSinglePage]="true"
                       [paginationOptions]="licenseOptions"
                       [pageInfoState]="licenses"
                       [collectionSize]="licenses?.totalElements"
                       [disableRouteParameterUpdate]="true"
                       (pageChange)="switchLicensePage($event)">



            <div class="file-section row" *ngFor="let file of licenses?.page;">
                <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">{{file.name}}</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 [href]="file._links.content.href" [download]="file.name">
                        {{"item.page.filesection.download" | translate}}
                    </ds-file-download-link>
                </div>
            </div>
        </ds-pagination>
    </div>
</ds-metadata-field-wrapper>
