@php($photos = $items->where('type', 'photo')->values())

@if ($items->isEmpty())
    <x-empty-state icon="photo"
                   :title="__('Nothing in this view')"
                   :message="__('Switch to another media type, or return to all albums.')" />
@else
    {{--
        Masonry: field photography arrives in mixed orientations, and cropping
        every frame to one ratio throws away the composition. Videos keep a fixed
        ratio because their poster frames are uniform.
    --}}
    <div x-data="lightbox">
        <x-masonry :columns="3" data-reveal-group>
            @foreach ($items as $item)
                @if ($item->isVideo())
                    <a href="{{ $item->source() }}" target="_blank" rel="noopener"
                       class="masonry-item group relative block aspect-4/3 overflow-hidden rounded-xl bg-dark"
                       data-reveal-child>
                        @if ($item->thumbnail)
                            <img src="{{ thumb_url($item->thumbnail) }}" alt="{{ $item->caption }}" loading="lazy" decoding="async"
                                 class="size-full object-cover opacity-60 transition group-hover:opacity-85">
                        @endif

                        <span class="absolute inset-0 flex items-center justify-center text-white/85 transition group-hover:text-white">
                            <x-icon name="play" class="size-10" />
                        </span>

                        @if ($item->caption)
                            <span class="absolute inset-x-0 bottom-0 bg-dark/80 p-2.5 text-xs text-white">{{ $item->caption }}</span>
                        @else
                            <span class="sr-only">{{ __('Play video') }}</span>
                        @endif
                    </a>
                @else
                    <button type="button"
                            @click="show({{ Js::from($photos->map(fn ($p) => ['src' => image_url($p->path), 'caption' => $p->caption])) }}, {{ $photos->search(fn ($p) => $p->id === $item->id) }})"
                            class="masonry-item group relative block w-full overflow-hidden rounded-xl bg-surface-muted"
                            data-reveal-child>

                        <img src="{{ thumb_url($item->path) }}" alt="{{ $item->caption ?: __('Gallery photograph') }}"
                             loading="lazy" decoding="async"
                             class="w-full transition duration-700 group-hover:scale-[1.03]">

                        @if ($item->caption)
                            <span class="absolute inset-x-0 bottom-0 bg-dark/80 p-2.5 text-left text-xs text-white opacity-0 transition group-hover:opacity-100">
                                {{ $item->caption }}
                            </span>
                        @endif
                    </button>
                @endif
            @endforeach
        </x-masonry>

        @include('public.partials.lightbox')
    </div>
@endif