<div class="workarea">
  <div class="file-manager-bar">
    <div class="upload-area">
      <kendo-upload class="uploadfiles" [concurrent]="false" [restrictions]="myRestrictions"
                    (success)="onSuccess($event)"
                    (upload)="onUpload($event)"
                    (complete)="onComplete()"
                    (uploadProgress)="uploadProgress($event)"
                    [showFileList]="false"
                    [saveUrl]="uploadSaveUrl">
        <ng-template kendoUploadFileInfoTemplate let-files>
          <div *ngIf="files!==undefined && files!== null && files[0] !== null">
            <div (click)="onClick(files)">Name: {{ files[0].name }}</div>
            <div *ngIf="files[0].validationErrors !== undefined"> Cannot upload this file {{files[0]}}</div>
            <div *ngIf="map.get(files[0].uid) !== undefined"> fuck all {{map.get(files[0].uid).response.body.Funder}} </div>
          </div>
        </ng-template>
      </kendo-upload>
    </div>
    <div class="search-area">
      <kendo-textbox class='search-people' [placeholder]="'Type to search/filter'" (valueChange)="onFilterUploads($event)" > </kendo-textbox>
      <kendo-icon name="search" size="medium"></kendo-icon>
    </div>
  </div>
  <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
  <div class="container">
    <div *ngIf="!loading" class="row justify-content-start">
      <div  class="col-lg-3 text-center" *ngFor="let p of displayedUploads">
        <app-upload-cards [uploadId]="p"></app-upload-cards>
      </div>
    </div>
    <div *ngIf="loading" class="row justify-content-center">
      <div class="col-lg-1 text-center loader">
        <kendo-loader [size]="'large'"></kendo-loader>
      </div>
    </div>
    <div class="vertical-spacer"></div>
  </div>

  <kendo-datapager
    class="bottom-pager"
    [style.width.%]="100"
    [pageSize]="pageSize"
    [skip]="skip"
    [total]="total"
    (pageChange)="onPageChange($event)">
  </kendo-datapager>

</div>
