<ng-container *transloco="let t; prefix: 'book.fileUploader'">
<div class="additional-file-uploader-container">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-file-plus header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">{{ t('title') }}</h2>
      <p class="panel-description">{{ book.metadata?.title || t('unknownTitle') }}</p>
    </div>
    <p-button
      icon="pi pi-times"
      [rounded]="true"
      [text]="true"
      severity="secondary"
      (click)="closeDialog()"
      class="close-button">
    </p-button>
  </div>

  <div class="dialog-content">
    <!-- File Type Selection -->
  <p-select
    [options]="fileTypeOptions"
    [(ngModel)]="fileType"
    (ngModelChange)="onFileTypeChange()"
    optionLabel="label"
    optionValue="value"
    [placeholder]="t('selectFileType')"
    class="full-width"
    [disabled]="isUploading"
  ></p-select>

  <!-- File Upload -->
  <p-fileupload class="file-upload" name="file"
    [customUpload]="true"
    [multiple]="false"
    [accept]="acceptedFormats"
    (onSelect)="onFilesSelect($event)"
    (uploadHandler)="uploadFiles($event)"
    [disabled]="isUploading">
    <ng-template #header let-files let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback">
      <div class="upload-header-actions">
        <div class="action-buttons">
          <p-button (onClick)="choose($event, chooseCallback)"
            icon="pi pi-images"
            [rounded]="true"
            [outlined]="true"
            [disabled]="isChooseDisabled()"/>
          <p-button (onClick)="uploadEvent(uploadCallback)"
            icon="pi pi-cloud-upload"
            [rounded]="true"
            [outlined]="true"
            severity="success"
            [disabled]="isUploadDisabled()"/>
          <p-button (onClick)="onClear(clearCallback)"
            icon="pi pi-times"
            [rounded]="true"
            [outlined]="true"
            severity="danger"
            [disabled]="!filesPresent() || isUploading"/>
        </div>
      </div>
    </ng-template>
    <ng-template #content let-files let-removeFileCallback="removeFileCallback">
      <div class="upload-content">
        @if (files?.length > 0) {
          <div>
            <div class="file-list-scroll">
              <div class="file-list">
                @for (uploadFile of this.files; track uploadFile; let i = $index) {
                  <div class="file-row">
                    <div class="file-info">
                      <p-badge [value]="getFileStatusLabel(uploadFile)" [severity]="getBadgeSeverity(uploadFile.status)" class="file-badge"/>
                      <span class="file-name">
                        {{ uploadFile.file.name }}
                      </span>
                      <div class="file-size">{{ formatSize(uploadFile.file.size) }}</div>
                    </div>
                    @switch (uploadFile.status) {
                      @case ('Pending') {
                        <p-button
                          icon="pi pi-times"
                          (click)="onRemoveTemplatingFile($event, uploadFile.file, removeFileCallback, i)"
                          severity="danger"
                          [text]="true"/>
                      }
                      @case ('Uploading') {
                        <i
                          class="pi pi-spin pi-spinner status-icon"
                          style="color: slateblue"
                          [pTooltip]="t('statusUploading')"
                          tooltipPosition="top">
                        </i>
                      }
                      @case ('Uploaded') {
                        <i
                          class="pi pi-check status-icon"
                          style="color: green"
                          [pTooltip]="t('statusUploaded')"
                          tooltipPosition="top">
                        </i>
                      }
                      @case ('Failed') {
                        <i
                          class="pi pi-exclamation-triangle status-icon"
                          style="color: darkred"
                          [pTooltip]="uploadFile.errorMessage || t('statusUploadFailed')"
                          tooltipPosition="top">
                        </i>
                      }
                    }
                  </div>
                }
              </div>
            </div>
          </div>
        }
      </div>
    </ng-template>
    <ng-template #file></ng-template>
    <ng-template #empty>
      <div class="empty-state">
        <i class="pi pi-cloud-upload empty-icon"></i>
        <p class="empty-text">{{ t('dragDropText') }}</p>
        <p class="empty-subtext">
          @if (fileType === AdditionalFileType.ALTERNATIVE_FORMAT) {
            <span [innerHTML]="t('supportedFormats')"></span>
            <br/>
          } @else {
            <span>{{ t('supplementaryAllFormats') }}</span>
            <br/>
          }
          {{ t('maxFileSize', { size: maxFileSizeDisplay }) }}
        </p>
      </div>
    </ng-template>
  </p-fileupload>
  </div>
</div>
</ng-container>
