@php
    $images = array_values(array_filter($data['images'] ?? [], fn ($i) => filled($i['image'] ?? null)));
    $lightbox = ! empty($data['lightbox']);
    $slides = array_map(fn ($i) => ['src' => $url($i['image']), 'alt' => $i['image_alt'] ?? '', 'caption' => $i['caption'] ?? ''], $images);
@endphp
<section class="{{ $cls }}" {{ $attrs }}
    @if($lightbox)
        x-data="{ open: false, index: 0, slides: @js($slides),
            show(i) { this.index = i; this.open = true },
            next() { this.index = (this.index + 1) % this.slides.length },
            prev() { this.index = (this.index - 1 + this.slides.length) % this.slides.length } }"
        @keydown.escape.window="open = false"
        @keydown.arrow-right.window="open && next()"
        @keydown.arrow-left.window="open && prev()"
    @endif
>
    <div class="container-page">
        @include('builder.partials.head')

        <div @class(['pb-gallery pb-grid pb-grid--'.($data['columns'] ?? '3'), 'mt-12' => filled($data['title'] ?? null)])>
            @foreach($slides as $i => $slide)
                <figure class="pb-gallery__item">
                    @if($lightbox)
                        <button type="button" class="pb-gallery__button" @click="show({{ $i }})" aria-label="Open image {{ $i + 1 }}">
                    @endif
                    <img src="{{ $slide['src'] }}" alt="{{ $slide['alt'] }}" width="640" height="480" class="pb-gallery__img" loading="lazy" decoding="async">
                    @if($lightbox)
                        </button>
                    @endif
                    @if($slide['caption'] !== '')
                        <figcaption class="home-figure-caption">{{ $slide['caption'] }}</figcaption>
                    @endif
                </figure>
            @endforeach
        </div>
    </div>

    @if($lightbox && count($slides))
        <div x-show="open" x-cloak x-transition.opacity class="pb-lightbox" role="dialog" aria-modal="true" @click.self="open = false">
            <button type="button" class="pb-lightbox__close" @click="open = false" aria-label="Close">&times;</button>
            @if(count($slides) > 1)
                <button type="button" class="pb-lightbox__nav pb-lightbox__nav--prev" @click="prev()" aria-label="Previous image">‹</button>
                <button type="button" class="pb-lightbox__nav pb-lightbox__nav--next" @click="next()" aria-label="Next image">›</button>
            @endif
            <figure class="pb-lightbox__figure">
                <img :src="slides[index].src" :alt="slides[index].alt" class="pb-lightbox__img">
                <figcaption class="pb-lightbox__caption" x-show="slides[index].caption" x-text="slides[index].caption"></figcaption>
            </figure>
        </div>
    @endif
</section>