<div
  class="dropzone"
  [class.dragover]="isDragOver()"
  (dragover)="onDragOver($event)"
  (dragleave)="onDragLeave($event)"
  (drop)="onDrop($event)"
  (click)="fileInput.click()"
>
  <input
    #fileInput
    type="file"
    (change)="onFileSelected($event)"
    hidden
    [accept]="accept()"
    [multiple]="multiple()"
  />

  <div class="content">
    <div class="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-upload-cloud"
      >
        <polyline points="16 16 12 12 8 16"></polyline>
        <line x1="12" y1="12" x2="12" y2="21"></line>
        <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path>
        <polyline points="16 16 12 12 8 16"></polyline>
      </svg>
    </div>
    <p class="text">{{ label() | translate }}</p>
    <p class="subtext">{{ subtext() | translate }}</p>

    @if (fileNames().length > 0) {
      <div class="file-badges">
        @for (name of fileNames(); track name) {
          <div class="file-badge">{{ name }}</div>
        }
      </div>
    }
  </div>
</div>
