<!-- Mode compact : bouton "+ ajouter" carre, utilise dans les galeries. -->
@if (compact) {
  <label class="upload-compact" [class.loading]="uploading" [title]="errorMessage || 'Ajouter une image'">
    @if (!uploading) {
      <lucide-icon [img]="Upload" [size]="18"></lucide-icon>
      <span>Ajouter</span>
    } @else {
      <div class="upload-spinner" aria-label="Upload en cours"></div>
      <p class="upload-zone-hint">Upload en cours...</p>
    }
    <input type="file"
      accept="image/jpeg,image/png,image/webp,image/gif"
      (change)="onFileSelected($event)"
      [disabled]="uploading"
      hidden />
  </label>
  @if (errorMessage) {
    <p class="upload-error-inline">
      <lucide-icon [img]="AlertCircle" [size]="12"></lucide-icon>
      {{ errorMessage }}
    </p>
  }
} @else {
  <label class="upload-zone"
    [class.drag-over]="dragOver"
    [class.loading]="uploading"
    (dragover)="onDragOver($event)"
    (dragleave)="onDragLeave()"
    (drop)="onDrop($event)">
    @if (!uploading) {
      <lucide-icon [img]="Upload" [size]="32"></lucide-icon>
      <p class="upload-zone-title">Glisse une image ici</p>
      <p class="upload-zone-hint">ou clique pour choisir un fichier (JPEG, PNG, WebP, GIF, max 10 Mo)</p>
    } @else {
      <div class="upload-spinner" aria-label="Upload en cours"></div>
      <p class="upload-zone-hint">Upload en cours...</p>
    }
    <input type="file"
      accept="image/jpeg,image/png,image/webp,image/gif"
      (change)="onFileSelected($event)"
      [disabled]="uploading"
      hidden />
  </label>
  @if (errorMessage) {
    <p class="upload-error" role="alert">
      <lucide-icon [img]="AlertCircle" [size]="14"></lucide-icon>
      {{ errorMessage }}
    </p>
  }
}

<!-- Mode standard : grande drop-zone cliquable. -->

