@if (activeFieldVersion == true) {
  <w-input-label [label]="label" [tooltip]="tooltip" [required]="required" [validated]="isValid()"></w-input-label>
}
@if (activeFieldVersion == true && (label != undefined && label.length > 0)) {
  <div class="input-label-gap-divider"></div>
}
@if(loading){
  <div class="w-full flex justify-content-center">
    <w-button [loading]="loading" type="text"></w-button>
  </div>
}
<p-fileupload #fileUpload class="w-file-button"
    [ngClass]="{'w-file-uploader' : activeFieldVersion == false,
                'w-file-uploader-field' : activeFieldVersion == true}"
  mode="advanced"
  [accept]="accept"
  chooseLabel="Choose"
  [customUpload]="true" 
  [maxFileSize]="actualMaxSize" 
  [invalidFileSizeMessageSummary]="fileUploadConfig.invalidFileSizeMessageSummary + ':'"
  [invalidFileSizeMessageDetail]="fileUploadConfig.invalidFileSizeMessageDetail + ' ' + fileSizeService.formatSizeMessage() + '.'"
  [invalidFileTypeMessageSummary]="fileUploadConfig.invalidFileTypeMessageSummary + ':'"
  [invalidFileTypeMessageDetail]="fileUploadConfig.invalidFileTypeMessageDetail + ': {0}.'"
  (onSelect)="onCustomUpload($event)">
  <ng-template let-file let-i="index" pTemplate='file'>
    @if (false) {
      <div></div>
    }
  </ng-template>
  <ng-template #content let-messages="messages">
    @if (false) {
      <p-progressBar></p-progressBar>
    }
    @for (message of messages; track message) {
      <p-message [severity]="message.severity" closable [life]="timelife" (onClose)="onMessagesClosed($event)">{{message.text}}</p-message>
    }
    @if ((fileSelected != null ||  fileSelected != undefined) || (fileSingleMode != null || fileSingleMode != undefined)) {
      <p-listbox listStyleClass="w-file-listbox-list"
        [ngClass]="getListboxClass()"
        [options]="(fileSelected == null && (fileSingleMode != null || fileSingleMode != undefined)) ? [fileSingleMode] : [fileSelected]"
        optionLabel="name"
        [listStyle]="{ 'max-width': '100%', 'max-height':'100%' }">
        <ng-template let-file pTemplate="item">
          @if ((fileSingleMode != null || undefined) || (fileSelected != null || undefined)) {
            <div class="w-file-uploader-delete-button flex align-content-center justify-content-center" style="width: 100%;">
              <w-button buttonClass="w-file-uploader-delete-button-icon" icon="pi pi-trash" type="text" (click)="removeFile($event, fileSelected)"></w-button>
            </div>
          }
          <div class="w-file-listbox-item">
            <span class="w-icon document"[ngStyle]="{'font-size': '32px', 'color': 'gray'}"></span>
            <div class="subtitle2 m-0">{{ getFileName(file)  | wappSummary : 20 }}</div>
          </div>
          @if (fileSingleMode) {
            <div class="w-file-uploader-download-button flex align-content-center justify-content-center" style="width: 100%;">
              <w-button buttonClass="w-file-uploader-download-button-icon" icon="pi pi-arrow-circle-down" type="text" (onClick)="downloadFile(file)"></w-button>
            </div>
          }
        </ng-template>
      </p-listbox>
    }
    <div (click)="loading ? null : openFileSelector()"
      class="w-file-uploader-space-container flex flex-column justify-content-center align-items-center" [style.cursor]="loading ? 'default' : 'pointer'"
            [ngClass]="{ 'w-file-uploader-container-height' : (fileSelected == null || undefined ) && activeFieldVersion == false, 'w-file-uploader-field-container-height' : activeFieldVersion == true && (fileSelected == null || undefined ), 
                'borders': activeFieldVersionBorders, 'w-file-uploader-loading': loading }">
      <span class="pi pi-upload subtitle1 textMainColor m-0"></span>
      <span class="subtitle1 textMainColor m-0"> {{ fileUploadConfig.headerLabel }} </span>
      <span class="body textMainColor m-0"> {{ fileUploadConfig.subHeaderLabel }} </span>
    </div>
  </ng-template>
</p-fileupload>