<div class="upload-dragdrop" [class.dragover]="isDragover" [class.loading]="isLoading" [class.success]="isSuccess">
  <div class="upload-dragdrop-image">
    <img
      [ngSrc]="assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'"
      alt="drag-drop-icon"
      aria-hidden="true"
      [width]="180"
      [height]="180" />
    <div class="upload-dragdrop-loading">
      <div class="progress-donut" #donutElement></div>
    </div>
    <div class="upload-dragdrop-success">
      <it-icon name="check"></it-icon>
    </div>
  </div>
  <div class="upload-dragdrop-text">
    <p class="upload-dragdrop-weight">
      <it-icon name="file" size="xs"></it-icon>
      {{ extension }} ({{ fileSize }})
    </p>
    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>
    @if (isLoading) {
      <p>{{ 'it.form.upload-loading' | translate }}</p>
    }
    @if (isSuccess) {
      <p>{{ 'it.form.upload-complete' | translate }}</p>
    }
    @if (!isLoading && !isSuccess) {
      <p>
        {{ 'it.form.upload-or' | translate }}
        <input type="file" [id]="id" class="upload-dragdrop-input" [accept]="accept" (change)="onLoadFile($event)" />
        <label [for]="id">{{ 'it.form.upload-select-device' | translate }}</label>
      </p>
    }
  </div>
</div>
