<div class="block-gallery" data-controller="blocks/block-gallery" data-aos="fade-up" data-aos-once="true" data-aos-delay="500">
    <div class="block-gallery__slider" data-role="slider">
        @foreach($imageItems as $i => $image)
            <div class="block-gallery__slide" data-role="slide" data-id="{{ $i ?? "" }}">
                @php
                    $cta = generateLink($image->cta, 'std-button');
                @endphp
                @if($image->content || $image->subtitle || $cta)
                    <div class="block-gallery__slide-overlay animate animate__fadeIn" data-role="overlay">
                        <span class="block-gallery__close-button" data-index="{{ $i ?? "" }}" data-action="close"></span>
                        <span class="block-gallery__open-button" data-index="{{ $i ?? "" }}" data-action="open">
                            @include('frontend.svg.icon-arrow-blue-down')
                        </span>
                        <div class="animate animate__fadeIn">
                            <div class="block-gallery__content">
                                @if($image->subtitle)
                                    <div class="block-gallery__subtitle">
                                        {{ $image->subtitle }}
                                    </div>
                                @endif
                                @if($image->content)
                                    <div class="block-gallery__content rich-content">
                                        {!!$image->content !!}
                                    </div>
                                @endif
                                @if($cta)
                                    <div class="block-gallery__cta">
                                        {!! $cta !!}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                <picture>
                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($image->mediaItem->filename, '1920x670') }}.webp" type="image/webp">
                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($image->mediaItem->filename, '1920x670') }}">
                    @if($image->mediaItemMobile)
                        <source srcset="{{ getMediaUrl($image->mediaItemMobile->filename, '600x600') }}.webp" type="image/webp">
                        {!! getMediaImg($image->mediaItemMobile, '600x600', htmlspecialchars($image->caption), 'animate animate__fadeIn') !!}
                    @else
                        <source srcset="{{ getMediaUrl($image->mediaItem->filename, '600x600') }}.webp" type="image/webp">
                        {!! getMediaImg($image->mediaItem, '600x600', htmlspecialchars($image->caption), 'animate animate__fadeIn') !!}
                    @endif
                </picture>
                @if($image->caption)
                    <div class="block-gallery__caption">
                        {{ $image->caption }}
                    </div>
                @endif
            </div>
        @endforeach
    </div>
    <div class="block-gallery__navigation" data-role="nav">
        <div class="block-gallery__prev" data-action="prev">
            @include('frontend.svg.icon-arrow-blue-down')
        </div>
        @foreach($imageItems as $i => $image)
            <div class="block-gallery__dot" data-action="dot" data-index="{{ $i }}"></div>
        @endforeach
        <div class="block-gallery__next" data-action="next">
            @include('frontend.svg.icon-arrow-blue-down')
        </div>
    </div>
</div>
