@once
    <link rel="stylesheet" href="{{ asset('assets/css/gallery-shortcode.css') }}">
    <script src="{{ asset('assets/js/gallery-lightbox.js') }}" defer></script>
@endonce

<section class="cms-gallery" aria-label="{{ $gallery->title }}">
    <header class="cms-gallery__header">
        <h2>{{ $gallery->title }}</h2>
        @if ($gallery->description)
            <p>{{ $gallery->description }}</p>
        @endif
    </header>
    <div class="cms-gallery__grid">
        @foreach ($gallery->images as $image)
            @php
                $imageUrl = Storage::disk('public')->url($image->image_path);
                $caption = $image->title ?: $gallery->title;
            @endphp
            <a class="cms-gallery__item" href="{{ $imageUrl }}" data-gallery-item data-caption="{{ $caption }}" aria-label="View {{ $caption }}">
                <img src="{{ $imageUrl }}" alt="{{ $caption }}" loading="lazy">
                @if ($image->title)
                    <span>{{ $image->title }}</span>
                @endif
            </a>
        @endforeach
    </div>
</section>