<div class="landing-gallery" data-controller="blocks/projects-detail-slider-banner" data-aos="fade-up" data-aos-once="true" data-aos-delay="500">
    <div class="landing-gallery__slider" data-role="slider">
        @foreach($blockData->items as $i => $image)
            <div class="landing-gallery__slide" data-role="slide" data-id="{{ $i ?? "" }}">
                <picture>
                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($image->image->filename, '1920x670') }}.webp" type="image/webp">
                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($image->image->filename, '1920x670') }}">
                    @if(!empty($image->mobileImage->filename))
                        <source srcset="{{ getMediaUrl($image->mobileImage->filename, '600x600') }}.webp" type="image/webp">
                        {!! getMediaImg($image->mobileImage, '600x600', '', 'animate animate__fadeIn') !!}
                    @else
                        <source srcset="{{ getMediaUrl($image->image->filename, '600x600') }}.webp" type="image/webp">
                        {!! getMediaImg($image->image, '600x600', '', 'animate animate__fadeIn') !!}
                    @endif
                </picture>
                @if($image->call_to_action)
                    <div class="landing-gallery__cta">
                        {!! generateLink($image->call_to_action, 'std-button std-button--large') !!}
                    </div>
                @endif
            </div>
        @endforeach
    </div>
    <div class="projects-detail-slider-banner__navigation" data-role="nav">
        <div class="projects-detail-slider-banner__prev" data-action="prev">
            @include('frontend.svg.icon-arrow-blue-down')
        </div>
        @foreach($blockData->items as $i => $image)
            <div class="projects-detail-slider-banner__dot" data-action="dot" data-index="{{ $i }}"></div>
        @endforeach
        <div class="projects-detail-slider-banner__next" data-action="next">
            @include('frontend.svg.icon-arrow-blue-down')
        </div>
    </div>
</div>
