@props([
    'photos' => null,        // photos déjà en ligne (relation images)
    'max' => 10,             // nombre total autorisé
    'titre' => 'Glissez vos photos ici',
    'aide' => null,
])

@php
    $existantes = $photos ?? collect();
    $aide ??= 'JPG, PNG ou WebP · '.$max.' photos maximum · 8 Mo par fichier';
@endphp

<div class="photo-uploader" data-uploader data-max="{{ $max }}">
    <label class="dropzone" data-dropzone>
        <x-icon name="upload"/>
        <strong class="dropzone-titre">{{ $titre }}</strong>
        <span class="small muted">{{ $aide }}</span>
        <span class="btn btn-outline btn-sm" style="margin-top:12px">Parcourir mes fichiers</span>
        <input type="file" name="photos[]" accept="image/jpeg,image/png,image/webp"
               multiple hidden data-photo-input>
    </label>

    <div class="photo-grid" data-photo-grid>
        @foreach($existantes as $photo)
            {{-- La case précède les éléments qu'elle pilote : le sélecteur « ~ » ne
                 remonte pas dans le DOM, l'ordre conditionne tout l'état visuel. --}}
            <figure class="photo-tile" data-photo-existante>
                <input type="checkbox" name="supprimer_photos[]" value="{{ $photo->id }}"
                       id="suppr-{{ $photo->id }}" class="photo-suppr-champ" data-photo-suppr>

                <img src="{{ $photo->url }}" alt="Photo {{ $loop->iteration }}">

                <label for="suppr-{{ $photo->id }}" class="photo-action" title="Retirer cette photo">
                    <x-icon name="close"/>
                </label>

                <span class="photo-restaurer">
                    <x-icon name="arrow-left"/> Annuler
                </span>

                <figcaption class="photo-legende" data-photo-legende></figcaption>
            </figure>
        @endforeach
    </div>

    <p class="photo-compteur" data-photo-compteur></p>
</div>