<pa-modal-advanced fitContent>
  <pa-modal-title>{{ 'upload.progress-dialog-title' | translate }}</pa-modal-title>
  <pa-modal-content>
    <div class="upload-progress-container">
      <p>
        <strong>{{ 'upload.takes_time' | translate }}</strong>
      </p>
      <p>{{ 'upload.once_uploaded' | translate }}</p>
      @if ((files | async)?.length || 0 > 0) {
        <div
          class="upload-list"
          >
          @for (file of files | async; track file) {
            <div
              class="upload-row"
              >
              <div
                class="file body-s"
                [class.failed]="file.failed">
                <span class="file-name">{{ file.file.name }}</span>
                <span class="file-size body-xs">– {{ file.file.size | size }}</span>
              </div>
              <div class="status">
                @if (file.uploaded) {
                  <pa-icon
                  name="check"></pa-icon>
                }
                @if (file.failed) {
                  <div class="error body-xs">
                    @if (file.conflicts) {
                      <pa-icon name="info"></pa-icon>
                      {{ 'upload.conflict' | translate }}
                    } @else if (file.limitExceeded) {
                      <pa-icon name="warning"></pa-icon>
                      {{ 'upload.limit-exceeded' | translate }}
                    } @else {
                      <pa-icon name="warning"></pa-icon>
                      {{ 'upload.error' | translate }}
                    }
                  </div>
                }
                @if (file.progress !== 100) {
                  <nsi-progress-bar
                  [progress]="file.progress"></nsi-progress-bar>
                }
              </div>
            </div>
          }
        </div>
      }
    </div>
  </pa-modal-content>
  <pa-modal-footer>
    <div class="progress-footer">
      <div class="queue-length">{{ 'modal.upload.queue_length' | translate }}: {{ (files | async)?.length }}</div>
      <pa-button (click)="close.emit()">
        {{ 'generic.close' | translate }}
      </pa-button>
    </div>
  </pa-modal-footer>
</pa-modal-advanced>
