<div data-controller="blocks/projects-detail-slider">
    <div
        class="projects-detail-slider block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}"
        data-aos="fade-up" data-aos-once="true" data-aos-delay="500">
        @if ($block->anchor_id )
            <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
        @endif
        <div class="projects-detail-slider__wrapper">
            <div class="projects-detail-slider__container">
                <div class="projects-detail-slider__slider swiper swiper-container projects-detail-slider--hide" data-role="slider">
                    <div class="projects-detail-slider__background"></div>
                    <div class="projects-detail-slider__slider-wrapper swiper-wrapper">
                        @foreach($slides as $i => $image)
                            <div class="swiper-slide projects-detail-slider__slide" data-role="slide">
                                <div class="projects-detail-slider__slide-image" data-action="lightbox" data-id="{{ $i ?? "" }}">
                                    <picture>
                                        <source media="(min-width: 768px)" srcset="{{ getMediaUrl($image->mediaItem->filename, '1560x1030') }}.webp" type="image/webp">
                                        <source media="(min-width: 768px)" srcset="{{ getMediaUrl($image->mediaItem->filename, '1560x1030') }}">
                                        <source srcset="{{ getMediaUrl($image->mediaItem->filename, '780x520') }}.webp" type="image/webp">
                                        {!! getMediaImg($image->mediaItem, '780x520', htmlentities($image->caption)) !!}
                                    </picture>

                                    @if($image->credits)
                                        <div class="projects-detail-slider__credits">
                                            Image credit: {{ $image->credits }}
                                        </div>
                                    @endif
                                </div>

                                @if($image->caption)
                                    <div class="projects-detail-slider__caption">
                                        {!! $image->caption !!}
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    <div class="projects-detail-slider__prev swiper-button-prev" data-action="prev">
                        @include('frontend.svg.icon-arrow-blue-down')
                    </div>
                    <div class="projects-detail-slider__next swiper-button-next" data-action="next">
                        @include('frontend.svg.icon-arrow-blue-down')
                    </div>

                    <div class="projects-detail-slider__pagination">
                        @include('frontend.templates.components.swiper-navigation', [
                            'count' => count($slides),
                        ])
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="projects-detail-slider__lightbox" data-role="lightbox">
        <div class="projects-detail-slider__lightbox-close" data-action="close">
            @include('frontend.svg.close')
        </div>
        <div class="projects-detail-slider__lightbox-wrapper">
            <div class="projects-detail-slider__lightbox-container">
                <div class="swiper swiper-container projects-detail-slider__lightbox-slider" data-role="slider-lightbox">
                    <div class="swiper-wrapper projects-detail-slider__lightbox-slider-wrapper">
                            @foreach($slides as $i => $image)
                                <div class="swiper-slide projects-detail-slider__lightbox-slide" data-role="slide-lightbox" data-id="{{ $i ?? "" }}">
                                    <div class="projects-detail-slider__lightbox-slide-image">
                                        <picture>
                                            <source media="(min-width: 1920px)" srcset="{{ getMediaUrl($image->mediaItem->filename, '2340x1545') }}.webp" type="image/webp">
                                            <source media="(min-width: 1920px)" srcset="{{ getMediaUrl($image->mediaItem->filename, '2340x1545') }}">
                                            <source media="(min-width: 768px)" srcset="{{ getMediaUrl($image->mediaItem->filename, '1560x1030') }}.webp" type="image/webp">
                                            <source media="(min-width: 768px)" srcset="{{ getMediaUrl($image->mediaItem->filename, '1560x1030') }}">
                                            <source srcset="{{ getMediaUrl($image->mediaItem->filename, '780x520') }}.webp" type="image/webp">
                                            {!! getMediaImg($image->mediaItem, '780x520', htmlentities($image->caption), '', true) !!}
                                        </picture>

                                        @if($image->credits)
                                            <div class="projects-detail-slider__lightbox-credits">
                                                Image credit: {{ $image->credits }}
                                            </div>
                                        @endif
                                    </div>
                                    @if($image->caption)
                                        <div class="projects-detail-slider__lightbox-caption">
                                            {!! $image->caption !!}
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                    </div>

                    <div class="swiper-button-prev projects-detail-slider__lightbox-prev" data-action="prev">
                        @include('frontend.svg.icon-arrow-blue-down')
                    </div>
                    <div class="swiper-button-next projects-detail-slider__lightbox-next" data-action="next">
                        @include('frontend.svg.icon-arrow-blue-down')
                    </div>

                    <div class="projects-detail-slider__lightbox-pagination">
                        @include('frontend.templates.components.swiper-navigation', [
                            'count' => count($slides),
                        ])
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
