<div class="card pt-6 pl-6 pr-6">
<p-panel class="col-12 p-d-block" header="Useful material" *ngIf="(helpFilesDesc != undefined)">
  <div *ngFor="let file of helpFilesDesc" class="flex">
    <div class="col-5 mb-2 md:col-11 md:mb-0">
      <i class="pi pi-file p-mr-2" style="font-size: 2rem"></i>
      <button pButton type="button" label="{{file.description}}" class="p-button-link button-link" (click)="downloadFile(file.fileIdentifier)"></button>
    </div>
    <div class="col-1 md:col-1" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN')">
      <button pButton pRipple type="submit" label="Delete" icon="pi pi-trash" (click)="delete(file.fileIdentifier)" [loading]="false" class="p-button-danger"></button>
    </div>
  </div>

</p-panel>
  <div class="col-12 pt-3 flex justify-content-center">
    <div class="col-1 md:col-1" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN')">
      <p-button label="Add new file" [loading]="false" type="submit" (click)="displayFileModal=true"></p-button>
    </div>
  </div>
</div>
<p-toast position="bottom-center" key="bc"></p-toast>
<p-confirmDialog></p-confirmDialog>
<p-dialog id="addFileModal" name="addFileModal" header="Add new file" [style]="{width: '50vw'}" [(visible)]="displayFileModal">
  <div class="field">
    <label>File title</label>
    <input id="fileDescription" type="text" pInputText [(ngModel)]="newFile.description" />
  </div>
  <div class="field">
    <label>Select file</label>
    <p-fileUpload name="help" [auto]=true (onRemove) = removeFile() [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader($event)"></p-fileUpload>
  </div>

  <div class="field button-center">
    <button pButton type="button" class="p-button-help mr-3" label="Cancel"  (click)="displayFileModal=false" ></button>
    <button pButton type="button"  label="Submit" (click)="addFile()" [disabled]="isEmpty()"></button>
  </div>
</p-dialog>