{{-- Clickable thumbnails + full-screen lightbox. Pass $urls (list of image URLs). Same look as the Browse page lightbox. --}}
@php $urls = array_values($urls ?? []); @endphp
<style>
    .fpd-lbx-thumbs { display:flex; flex-wrap:wrap; gap:6px; }
    .fpd-lbx-thumb { padding:0; border:1px solid #d1d5db; border-radius:4px; cursor:zoom-in; background:#f9fafb; overflow:hidden; }
    .fpd-lbx-thumb:hover { border-color:#6366f1; }
    .fpd-lbx-thumb img { width:72px; height:54px; object-fit:cover; display:block; }
    html.dark .fpd-lbx-thumb { border-color:#374151; background:#111827; }
    .fpd-lbx { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; }
    .fpd-lbx-close { position:absolute; top:-2.5rem; right:0; background:none; border:none; color:rgba(255,255,255,.8); font-size:2rem; line-height:1; cursor:pointer; padding:.25rem .5rem; border-radius:.25rem; }
    .fpd-lbx-close:hover { color:#fff; background:rgba(255,255,255,.12); }
    .fpd-lbx-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1.75rem; width:3rem; height:3rem; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .fpd-lbx-nav:hover { background:rgba(255,255,255,.25); }
</style>
@if ($urls)
    <div x-data="{ open: false, idx: 0, imgs: @js($urls),
                   show(i) { this.idx = i; this.open = true; },
                   prev() { this.idx = (this.idx - 1 + this.imgs.length) % this.imgs.length; },
                   next() { this.idx = (this.idx + 1) % this.imgs.length; } }"
         @keydown.escape.window="open = false"
         @keydown.arrow-left.window="open && prev()"
         @keydown.arrow-right.window="open && next()">
        <div class="fpd-lbx-thumbs">
            @foreach ($urls as $i => $url)
                <button type="button" class="fpd-lbx-thumb" @click="show({{ $i }})" title="Image {{ $i + 1 }}">
                    <img src="{{ $url }}" alt="Image {{ $i + 1 }}" loading="lazy">
                </button>
            @endforeach
        </div>

        <template x-teleport="body">
            <div x-show="open" x-cloak class="fpd-lbx" @click.self="open = false" style="display:none;">
                <div style="position:absolute;top:1.2rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:.78rem;letter-spacing:.06em;white-space:nowrap;pointer-events:none;">
                    <span x-text="idx + 1"></span>&thinsp;/&thinsp;{{ count($urls) }}
                </div>
                @if (count($urls) > 1)
                    <button type="button" @click="prev()" class="fpd-lbx-nav" style="left:1.25rem;">‹</button>
                @endif
                <div style="position:relative;display:inline-flex;">
                    <img :src="imgs[idx]" alt="" style="max-width:88vw;max-height:82vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.7);display:block;">
                    <button type="button" @click="open = false" class="fpd-lbx-close" title="Close">&times;</button>
                </div>
                @if (count($urls) > 1)
                    <button type="button" @click="next()" class="fpd-lbx-nav" style="right:1.25rem;">›</button>
                @endif
            </div>
        </template>
    </div>
@endif