<ng-container *transloco="let t; prefix: 'libraryCreator.loading'">
  <div class="fullscreen-loader">
    <div class="library-loader-content">
      <div class="library-loader-header">
        <i class="pi pi-book"></i>
        <h2>{{ t('title') }}</h2>
      </div>

      <div class="library-loader-body">
        <div class="book-title">
          @if (!isComplete) {
            <ng-container>
              {{ t('processing') }} <strong>{{ truncatedTitle }}</strong>
            </ng-container>
          }
          @if (isComplete) {
            <strong class="complete-message">
              <i class="pi pi-check-circle"></i>
              {{ t('complete') }}
            </strong>
          }
        </div>

        <div class="progress-info">
          <span>{{ current }} / {{ total }}</span>
          <span>{{ percentage }}%</span>
        </div>

        <div class="progress-bar-container">
          <div class="progress-bar-fill" [style.width.%]="percentage"></div>
        </div>

        @if (!isComplete) {
          <div class="loader-animation">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
          </div>
        }
      </div>

      @if (isComplete) {
        <div class="library-loader-footer">
          <button class="reload-button" (click)="onReload()">
            <i class="pi pi-bookmark"></i>
            {{ t('openLibrary') }}
          </button>
        </div>
      }
    </div>
  </div>
</ng-container>
