<div class="projects-detail-slider-banner" data-controller="blocks/projects-detail-slider-banner" data-aos="fade-up" data-aos-once="true" data-aos-delay="500">
    <div class="projects-detail-slider-banner__slider" data-role="slider">
        @foreach($project->projectImages as $i => $image)
            <div class="projects-detail-slider-banner__slide" data-role="slide" data-id="{{ $i ?? "" }}">
                @if($image->caption)
                    <div class="projects-detail-slider-banner__slide-overlay animate animate__fadeIn" data-role="overlay">
                        <span class="projects-detail-slider-banner__close-button" data-index="{{ $i ?? "" }}" data-action="close"></span>
                        <span class="projects-detail-slider-banner__open-button" data-index="{{ $i ?? "" }}" data-action="open">
                            @include('frontend.svg.icon-arrow-blue-down')
                        </span>
                        <div class="animate animate__fadeIn projects-detail-slider-banner__caption">
                            {!! $image->caption !!}
                        </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') }}">
                    <source srcset="{{ getMediaUrl($image->mediaItem->filename, '600x600') }}.webp" type="image/webp">
                    {!! getMediaImg($image->mediaItem, '600x600', htmlentities($card->caption), 'animate animate__fadeIn') !!}
                </picture>
                @if($image->credits)
                    <div class="projects-detail-slider-banner__credits">
                        Image credit: {{ $image->credits }}
                    </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($project->projectImages 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>
