<div class="resumable-file-upload closed" [ngClass]="{'closed': uploadService.isClosed }">
  <div>
    <div class="card">
      <div class="card-header  p-3 bg-primary text-white">
        @if (uploadService.isUploading) {
          <span>Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
        }
        @if (uploadService.isUploading == false) {
          <span>Uploaded <span>{{uploadService.files.length}}</span> files</span>
        }
        <span title="Cancel" class="fal fa-times float-end" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-end me-2" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
      </div>
      <div [ngClass]="{'minimized': uploadService.isMinimized }">
        <div class="card-block p-3">
          <ul class="list-unstyled">
            @for (file of uploadService.files; track $index) {
              <li class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
                @if (file.success == false) {
                  <div><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fal fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fal fa-check"></span></div>
                }
                @if (file.success) {
                  <div><a href="#" (click)="handleUploadedFileClick($event,file)" class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</a><span class="fal fa-check"></span></div>
                }
                <div class="progress-container"><div class="progress-bar" [style.width]="file.progress+'%'"></div></div>
                <div class="errormessage">{{file.errorMessage}}</div>
              </li>
            }
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
