@let vm = (model$ | async)!;
<p-dialog
  header="Carica documento"
  [(visible)]="vm.visible"
  [modal]="true"
  [closeOnEscape]="false"
  [closable]="false"
  [breakpoints]="{ '1370px': '75vw', '960px': '90vw' }"
  [style]="{ width: '50vw' }"
  (onHide)="resetUpload(fileUploadDocumentazione)"
>
  <div class="mt-2 grid">
    <div class="field col-12">
      <label for="fileUploadDocumentazione">
        <small *ngIf="vm.filesSizeSumExceed" class="p-error"
          >* La somma dei file supera la dimensione massima consentita</small
        >
        <br />(dimensione massima consentita
        {{ MAX_FILE_SIZE | filesizebinary }})
      </label>
      <!-- (onProgress)="progressReport(fileUploadDocumentazione, $event)" -->
      <p-fileUpload
        #fileUploadDocumentazione
        styleClass="uploadTrasmetti"
        name="fileUploadDocumentazione"
        required
        [multiple]="true"
        customUpload="true"
        chooseLabel="Scegli file"
        [showUploadButton]="false"
        [showCancelButton]="false"
        [maxFileSize]="MAX_FILE_SIZE"
        (onSelect)="selectFile($event.currentFiles)"
        invalidFileTypeMessageSummary="{0}: Tipo di file non ammesso, "
        invalidFileTypeMessageDetail="i tipi di file ammessi sono: {0}."
        invalidFileSizeMessageSummary="{0}: Dimensione massima superata, "
        invalidFileSizeMessageDetail="la massima dimensione consentita è {0}."
        [disabled]="vm.isLoading"
      >
        <ng-template #content>
          <p *ngIf="!fileUploadDocumentazione?.files?.length">
            Nessun documento selezionato
          </p>
        </ng-template>
        <ng-template let-file #file>
          <div class="grid grid-cols-[1fr_100px_50px] gap-2 items-center mb-3">
            <div>{{ file.name }}</div>
            <div class="text-right">
              {{ file.size | filesize }}
            </div>
            <div>
              <button
                [disabled]="vm.isSaving"
                icon="pi pi-times"
                pButton
                type="button"
                (click)="removeFile($event, fileUploadDocumentazione, file)"
              ></button>
            </div>
          </div>
        </ng-template>
      </p-fileUpload>
    </div>
  </div>

  <ng-template #footer>
    <button
      pButton
      type="button"
      [disabled]="vm.isLoading"
      class="p-button-outlined p-button-rounded"
      label="Annulla"
      (click)="cancel()"
    ></button>
    <button
      pButton
      [icon]="!vm.isSaving ? 'pi pi-cloud-upload' : 'pi pi-spin pi-spinner'"
      [label]="!vm.isSaving ? 'Carica' : 'Caricamento in corso...'"
      [disabled]="
        vm.isLoading ||
        !fileUploadDocumentazione.files.length ||
        vm.filesSizeSumExceed
      "
      class="p-button-rounded"
      (click)="save(fileUploadDocumentazione)"
    ></button>
  </ng-template>

  <p-messages
    styleClass="mt-3"
    [(value)]="messages"
    [enableService]="false"
    [closable]="false"
    [showTransitionOptions]="showTransitionOptions"
    [hideTransitionOptions]="'0ms'"
  ></p-messages>
</p-dialog>
