<!-- Container avec classe dynamique selon le layout choisi. -->
<div class="gallery-root">
  @switch (effectiveLayout) {
    <!-- =================== HERO =================== -->
    @case ('HERO') {
      @if (imageIds.length > 0 || editable) {
        <div class="hero">
          @if (heroId) {
            <div class="hero-main"
              (click)="openLightbox(heroId)"
              role="button"
              tabindex="0">
              <img [src]="urlFor(heroId)" [alt]="'imageGallery.mainIllustrationAlt' | translate" loading="lazy" />
              @if (editable) {
                <button type="button"
                  class="gallery-remove"
                  (click)="remove(heroId, $event)"
                  [attr.aria-label]="'imageGallery.removeImage' | translate">
                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
                </button>
              }
            </div>
          }
          @if (restIds.length > 0 || editable) {
            <div class="hero-rest">
              @for (id of restIds; track id) {
                <div class="gallery-tile hero-thumb"
                  (click)="openLightbox(id)"
                  role="button"
                  tabindex="0">
                  <img [src]="urlFor(id)" [alt]="'imageGallery.illustrationAlt' | translate" loading="lazy" />
                  @if (editable) {
                    <button type="button"
                      class="gallery-remove"
                      (click)="remove(id, $event)"
                      [attr.aria-label]="'imageGallery.removeImage' | translate">
                      <lucide-icon [img]="X" [size]="14"></lucide-icon>
                    </button>
                  }
                </div>
              }
              @if (editable) {
                <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
              }
            </div>
          }
          <!-- Si pas de hero mais editable, on montre au moins l'uploader. -->
          @if (!heroId && editable) {
            <div class="hero-rest">
              <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
            </div>
          }
        </div>
      } @else {
        <div class="gallery-empty">
          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
          <span>{{ 'imageGallery.empty' | translate }}</span>
        </div>
      }
    }
    <!-- =================== MASONRY =================== -->
    @case ('MASONRY') {
      @if (imageIds.length > 0 || editable) {
        <div class="masonry">
          @for (id of imageIds; track id) {
            <div class="masonry-item"
              (click)="openLightbox(id)"
              role="button"
              tabindex="0">
              <img [src]="urlFor(id)" [alt]="'imageGallery.illustrationAlt' | translate" loading="lazy" />
              @if (editable) {
                <button type="button"
                  class="gallery-remove"
                  (click)="remove(id, $event)"
                  [attr.aria-label]="'imageGallery.removeImage' | translate">
                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
                </button>
              }
            </div>
          }
          @if (editable) {
            <div class="masonry-item masonry-uploader">
              <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
            </div>
          }
        </div>
      } @else {
        <div class="gallery-empty">
          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
          <span>{{ 'imageGallery.empty' | translate }}</span>
        </div>
      }
    }
    <!-- =================== CAROUSEL =================== -->
    @case ('CAROUSEL') {
      @if (imageIds.length > 0 || editable) {
        <div class="carousel">
          @if (imageIds.length > 1) {
            <button type="button"
              class="carousel-nav carousel-prev"
              (click)="scrollCarousel(-1)"
              [attr.aria-label]="'common.previous' | translate">
              <lucide-icon [img]="ChevronLeft" [size]="20"></lucide-icon>
            </button>
          }
          <div class="carousel-track" #carouselTrack>
            @for (id of imageIds; track id) {
              <div class="carousel-slide"
                (click)="openLightbox(id)"
                role="button"
                tabindex="0">
                <img [src]="urlFor(id)" [alt]="'imageGallery.illustrationAlt' | translate" loading="lazy" />
                @if (editable) {
                  <button type="button"
                    class="gallery-remove"
                    (click)="remove(id, $event)"
                    [attr.aria-label]="'imageGallery.removeImage' | translate">
                    <lucide-icon [img]="X" [size]="14"></lucide-icon>
                  </button>
                }
              </div>
            }
            @if (editable) {
              <div class="carousel-slide carousel-uploader">
                <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
              </div>
            }
          </div>
          @if (imageIds.length > 1) {
            <button type="button"
              class="carousel-nav carousel-next"
              (click)="scrollCarousel(1)"
              [attr.aria-label]="'common.next' | translate">
              <lucide-icon [img]="ChevronRight" [size]="20"></lucide-icon>
            </button>
          }
        </div>
      } @else {
        <div class="gallery-empty">
          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
          <span>{{ 'imageGallery.empty' | translate }}</span>
        </div>
      }
    }
    <!-- =================== EDITORIAL =================== -->
    <!-- Rendu adaptatif facon magazine : 1 image → hero, 2 → diptyque, 3 → feature + 2 satellites, 4+ → feature + 3 satellites. -->
    @case ('EDITORIAL') {
      @if (imageIds.length > 0 || editable) {
        <div class="editorial">
          @for (id of imageIds; track id; let i = $index) {
            <div class="editorial-item"
              [class.editorial-feature]="i === 0"
              (click)="openLightbox(id)"
              role="button"
              tabindex="0">
              <img [src]="urlFor(id)" [alt]="'imageGallery.illustrationAlt' | translate" loading="lazy" />
              @if (editable) {
                <button type="button"
                  class="gallery-remove"
                  (click)="remove(id, $event)"
                  [attr.aria-label]="'imageGallery.removeImage' | translate">
                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
                </button>
              }
            </div>
          }
          @if (editable) {
            <div class="editorial-item editorial-uploader">
              <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
            </div>
          }
        </div>
      } @else {
        <div class="gallery-empty">
          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
          <span>{{ 'imageGallery.empty' | translate }}</span>
        </div>
      }
    }
    <!-- =================== MAPS =================== -->
    <!-- Cartes / plans : grandes vignettes, ratio natif preserve (pas de crop). -->
    @case ('MAPS') {
      @if (imageIds.length > 0 || editable) {
        <div class="maps">
          @for (id of imageIds; track id) {
            <div class="map-tile"
              (click)="openLightbox(id)"
              role="button"
              tabindex="0">
              <img [src]="urlFor(id)" [alt]="'imageGallery.mapAlt' | translate" loading="lazy" />
              @if (editable) {
                <button type="button"
                  class="gallery-remove"
                  (click)="remove(id, $event)"
                  [attr.aria-label]="'imageGallery.removeMap' | translate">
                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
                </button>
              }
            </div>
          }
          @if (editable) {
            <div class="map-tile map-uploader">
              <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
            </div>
          }
        </div>
      } @else {
        <div class="gallery-empty">
          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
          <span>{{ 'imageGallery.empty' | translate }}</span>
        </div>
      }
    }
    <!-- =================== GALLERY (default) =================== -->
    @default {
      @if (imageIds.length > 0 || editable) {
        <div class="gallery">
          @for (id of imageIds; track id) {
            <div class="gallery-tile"
              (click)="openLightbox(id)"
              role="button"
              tabindex="0">
              <img [src]="urlFor(id)" [alt]="'imageGallery.illustrationAlt' | translate" loading="lazy" />
              @if (editable) {
                <button type="button"
                  class="gallery-remove"
                  (click)="remove(id, $event)"
                  [attr.aria-label]="'imageGallery.removeImage' | translate">
                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
                </button>
              }
            </div>
          }
          @if (editable) {
            <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
          }
        </div>
      } @else {
        <div class="gallery-empty">
          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
          <span>{{ 'imageGallery.empty' | translate }}</span>
        </div>
      }
    }
  }
</div>

<!-- Etat vide (lecture uniquement). -->

<!-- Lightbox : image plein ecran sur fond noir, clic pour fermer. -->
@if (lightboxId) {
  <div class="lightbox-backdrop"
    (click)="closeLightbox()"
    role="dialog"
    [attr.aria-label]="'imageGallery.lightboxAria' | translate">
    <img [src]="urlFor(lightboxId)" [alt]="'imageGallery.lightboxAlt' | translate" class="lightbox-image" />
    <button type="button" class="lightbox-close" (click)="closeLightbox()" [attr.aria-label]="'common.close' | translate">
      <lucide-icon [img]="X" [size]="24"></lucide-icon>
    </button>
  </div>
}
