@if ((libraryState$ | async)?.libraries; as libraries) {
  <ng-container *transloco="let t; prefix: 'shared.bookUploader'">
  <div class="book-uploader">
    <div class="panel-header">
      <div class="header-icon-wrapper">
        <i class="pi pi-cloud-upload header-icon"></i>
      </div>
      <div class="header-text">
        <h2 class="panel-title">{{ t('title') }}</h2>
        <p class="panel-description">
          {{ t('description') }}
        </p>
      </div>
      <p-button
        icon="pi pi-times"
        (click)="closeDialog()"
        severity="secondary"
        [text]="true"
        [rounded]="true"
        class="close-button"/>
    </div>

    <div class="upload-container">
      <div class="destination-section">
        <div class="section-header">
          <span class="section-title">
            <i class="pi pi-map-marker"></i>
            {{ t('uploadDestination') }}
          </span>
        </div>
        <div class="destination-selector">
          <p-selectbutton
            [options]="stateOptions"
            [(ngModel)]="value"
            [allowEmpty]="false"
            optionLabel="label"
            optionValue="value">
          </p-selectbutton>
        </div>
      </div>

      @if (value === 'library') {
        <div class="gradient-divider"></div>
        <div class="library-selection">
          <div class="section-header">
            <span class="section-title">
              <i class="pi pi-building"></i>
              {{ t('librarySelection') }}
            </span>
          </div>
          <div class="selection-fields">
            <div class="field-group">
              <label for="library-select" class="field-label">{{ t('libraryLabel') }}</label>
              <p-select
                inputId="library-select"
                [options]="libraries"
                optionLabel="name"
                [placeholder]="t('selectLibrary')"
                [(ngModel)]="selectedLibrary"
                class="full-width">
              </p-select>
            </div>
            <div class="field-group">
              <label for="subpath-select" class="field-label">{{ t('subpathLabel') }}</label>
              <p-select
                inputId="subpath-select"
                [options]="selectedLibrary?.paths"
                optionLabel="path"
                [placeholder]="t('selectSubpath')"
                [(ngModel)]="selectedPath"
                [disabled]="!selectedLibrary"
                class="full-width">
              </p-select>
            </div>
          </div>
        </div>
      }

      <div class="gradient-divider"></div>

      <div class="file-upload-section">
        <div class="section-header">
          <span class="section-title">
            <i class="pi pi-file"></i>
            {{ t('selectFiles') }}
          </span>
        </div>
        <p-fileupload
          name="file"
          [customUpload]="true"
          [multiple]="true"
          accept=".pdf,.epub,.cbz,.cbr,.cb7,.fb2,.mobi,.azw,.azw3,.m4b,.m4a,.mp3,.opus"
          (onSelect)="onFilesSelect($event)"
          (uploadHandler)="uploadFiles($event)">
          <ng-template #header let-files let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback">
            <div class="upload-actions">
              <div class="action-buttons">
                <p-button
                  severity="info"
                  (onClick)="choose($event, chooseCallback)"
                  icon="pi pi-images"
                  [label]="t('chooseBtn')"
                  [outlined]="true"
                  [disabled]="isChooseDisabled()"
                  [pTooltip]="t('chooseTooltip')"
                  tooltipPosition="top"/>
                <p-button
                  (onClick)="uploadEvent(uploadCallback)"
                  icon="pi pi-cloud-upload"
                  [label]="t('uploadBtn')"
                  severity="success"
                  [disabled]="isUploadDisabled()"
                  [pTooltip]="t('uploadTooltip')"
                  tooltipPosition="top"/>
                <p-button
                  (onClick)="onClear(clearCallback)"
                  icon="pi pi-times"
                  [label]="t('clearBtn')"
                  severity="danger"
                  [outlined]="true"
                  [disabled]="!filesPresent() || isUploading"
                  [pTooltip]="t('clearTooltip')"
                  tooltipPosition="top"/>
              </div>
              <small class="upload-hint">{{ t('uploadHint') }}</small>
            </div>
          </ng-template>
          <ng-template #content let-files let-removeFileCallback="removeFileCallback">
            @if (files?.length > 0) {
              @if (isUploading || uploadCompleted) {
                <div class="upload-progress-summary">
                  <div class="progress-row">
                    <span class="progress-status">
                      @if (isUploading) {
                        <i class="pi pi-spin pi-spinner"></i>
                        {{ t('uploading') }}
                      } @else {
                        <i class="pi pi-check-circle"></i>
                        {{ t('complete') }}
                      }
                    </span>
                    <span class="progress-files">
                      {{ t('filesCount', { uploaded: getUploadedCount(), total: this.files.length }) }}
                      @if (getFailedCount() > 0) {
                        <span class="failed-count">{{ t('failedCount', { count: getFailedCount() }) }}</span>
                      }
                    </span>
                    <span class="progress-bytes">{{ formatSize(getUploadedBytes()) }} / {{ formatSize(getTotalBytes()) }}</span>
                    <span class="progress-percent">{{ getOverallProgress() }}%</span>
                  </div>
                  <p-progressbar
                    [value]="getOverallProgress()"
                    [showValue]="false"
                    class="overall-progress-bar"/>
                </div>
              }
              <div class="files-list">
                @for (uploadFile of this.files; track uploadFile; let i = $index) {
                  <div class="file-item">
                    <div class="file-info">
                      <p-badge
                        [value]="getFileStatusLabel(uploadFile)"
                        [severity]="getBadgeSeverity(uploadFile.status)"/>
                      <span class="file-name" [pTooltip]="uploadFile.file.name" tooltipPosition="top">{{ uploadFile.file.name }}</span>
                      <span class="file-size">{{ formatSize(uploadFile.file.size) }}</span>
                      @if (uploadFile.status === 'Uploading') {
                        <span class="file-progress-text">{{ uploadFile.progress }}%</span>
                      }
                    </div>
                    <div class="file-actions">
                      @switch (uploadFile.status) {
                        @case ('Pending') {
                          <p-button
                            icon="pi pi-times"
                            (click)="onRemoveTemplatingFile($event, uploadFile.file, removeFileCallback, i)"
                            severity="danger"
                            [text]="true"
                            [rounded]="true"/>
                        }
                        @case ('Uploading') {
                          <i class="pi pi-spin pi-spinner status-icon uploading"></i>
                        }
                        @case ('Uploaded') {
                          <i class="pi pi-check status-icon success"></i>
                        }
                        @case ('Failed') {
                          @if (uploadFile.errorMessage?.includes('exceeds maximum size')) {
                            @if (hasUploadCompleted()) {
                              <i
                                class="pi pi-exclamation-triangle status-icon warning"
                                [pTooltip]="uploadFile.errorMessage || t('fileTooLargeTooltip')"
                                tooltipPosition="top">
                              </i>
                            } @else {
                              <p-button
                                icon="pi pi-times"
                                (click)="onRemoveTemplatingFile($event, uploadFile.file, removeFileCallback, i)"
                                severity="danger"
                                [text]="true"
                                [rounded]="true"/>
                            }
                          } @else {
                            <i
                              class="pi pi-exclamation-triangle status-icon error"
                              [pTooltip]="uploadFile.errorMessage || t('uploadFailedTooltip')"
                              tooltipPosition="top">
                            </i>
                          }
                        }
                      }
                    </div>
                  </div>
                }
              </div>
            }
          </ng-template>
          <ng-template #file></ng-template>
          <ng-template #empty>
            <div class="empty-state">
              <div class="empty-icon-wrapper">
                <i class="pi pi-cloud-upload empty-icon" [class.active]="isUploadZoneActive()"></i>
              </div>
              <h3 class="empty-title">{{ t('dragDropTitle') }}</h3>
              <p class="empty-description">
                <span [innerHTML]="t('supportedFormats')"></span>
                <br/>
                {{ t('maxFileSize', { size: maxFileSizeDisplay }) }}
              </p>
            </div>
          </ng-template>
        </p-fileupload>
      </div>
    </div>
  </div>
  </ng-container>
}