{{--
    Photos de chantiers d'un modele ou d'une variation, celles que le site
    vitrine montre : publiees depuis la phototheque (PublicationsSite), ou
    l'on en ajoute et en retire. Ici en lecture.

    @param  array<string, \Illuminate\Support\Collection>  $groupes  intitule => photos ;
            la fiche d'un modele y met les siennes puis celles de chaque variation.

    Une miniature ouvre la visionneuse (js/visionneuse.js), qui fait defiler
    toutes les photos de la carte.
--}}
@php
    $groupes = array_filter($groupes, fn ($photos) => $photos->isNotEmpty());
    $total = collect($groupes)->flatten(1)->unique('id')->count();
@endphp

<div class="card p-4 photos-chantier" data-visionneuse-bloc>
    <h5 class="card-title p-0 mb-3">
        {{ __('Photos de chantier') }}
        <span class="badge bg-secondary ms-1">{{ $total }}</span>
    </h5>

    @forelse ($groupes as $intitule => $photos)
        @if (count($groupes) > 1)
            <h6 class="photos-chantier__groupe">{{ $intitule }}</h6>
        @endif
        <div class="photos-chantier__grille">
            @foreach ($photos as $photo)
                @continue(!($affichee = $photo->affichee()))
                <a href="{{ asset('storage/' . $affichee->url) }}" class="photos-chantier__vignette"
                   data-visionneuse="photos-chantier" data-legende="{{ $intitule }}" target="_blank" rel="noopener"
                   title="{{ __('Voir en grand') }}">
                    <img src="{{ $affichee->vignetteUrl() }}" alt="{{ __('Chantier :nom', ['nom' => $intitule]) }}"
                         loading="lazy">
                </a>
            @endforeach
        </div>
    @empty
        <p class="mb-0">{{ __('Aucune photo de chantier pour l\'instant.') }}</p>
    @endforelse

    @can('photos.view')
        <a href="{{ route('photos.index', ['site' => 1]) }}" class="small mt-3 d-inline-block">
            <i class="bi bi-images" aria-hidden="true"></i> {{ __("Publier d'autres photos depuis la photothèque") }}
        </a>
    @endcan
</div>

@once
    @push('head')
        <style>
            .photos-chantier__groupe { margin: 1rem 0 .5rem; font-weight: 600; }
            .photos-chantier__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
            .photos-chantier__vignette { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .375rem; background: #0001; }
            .photos-chantier__vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
            .photos-chantier__vignette:hover img { transform: scale(1.05); }
            @media (max-width: 575.98px) {
                .photos-chantier__grille { grid-template-columns: repeat(3, 1fr); }
            }
        </style>
    @endpush
@endonce