@if (!hideLoadButton) {
  <input type="file" [id]="id" class="upload" [accept]="accept" [multiple]="multiple" (change)="onLoadFiles($event)" />
  <label [for]="id">
    <it-icon name="upload" size="sm"></it-icon>
    <span>{{ 'it.form.upload' | translate }}</span>
  </label>
}

@if (fileList.length) {
  <ul class="upload-file-list" [class.upload-file-list-image]="images">
    @for (item of fileList; track item.id) {
      <li
        class="upload-file"
        [class.error]="item.error"
        [class.uploading]="!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100"
        [class.success]="!item.error && (!item.progress || item.progress >= 100)">
        @if (images) {
          <div class="upload-image">
            <img [attr.src]="previewImages.get(item.id)" [alt]="item.file.name" />
          </div>
        } @else {
          <it-icon name="file" size="sm" [color]="!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'"></it-icon>
        }
        <p [itTooltip]="item.tooltip">
          <span class="visually-hidden">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>
          {{ item.file.name }} <span class="upload-file-weight">{{ getFileSize(item.file) }}</span>
        </p>
        @if (item.removable && (!item.progress || item.progress < 100)) {
          <button type="button" (click)="deleteItem.emit(item)">
            <span class="visually-hidden">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>
            <it-icon name="close"></it-icon>
          </button>
        }
        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {
          <button type="button" disabled>
            <span class="visually-hidden">{{ 'it.form.upload-complete' | translate }}</span>
            <it-icon name="check"></it-icon>
          </button>
        }
        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {
          <it-progress-bar [value]="item.progress!"></it-progress-bar>
        }
      </li>
    }
  </ul>
}