{{-- Create a default fall back for the image sizes --}}
@php if(!isset($imageSizes)) $imageSizes = [ 'small' => 425, 'medium' => 839]; @endphp

@if(isset($images) && sizeof($images) >= 1)
    <div class="c-projector">

        <figure class="c-projector__figure  js-slider" id="{{$imageId}}">

            @if(isset($caption) && !empty($caption) )
                <figcaption class="c-projector__caption">
                    {{$caption}}
                </figcaption>
            @endif

            @foreach($images as $imageSlide)
                <picture class="c-projector__picture  js-slider-slide" data-order="{{$loop->index}}">
                    @foreach($imageSizes as $imageSizeKey => $imageSize)
                        @if(!$loop->last)
                            <source media="(max-width: {{$imageSize}}px)"
                                    srcset="@if(isset($imageSlide->{$imageSizeKey.'_image_url'})){{ $imageSlide->{$imageSizeKey.'_image_url'} }} @elseif(isset($imageSlide[$imageSizeKey])){{ $imageSlide[$imageSizeKey] }}@endif">
                        @else
                            <img class="c-projector__img"
                                 src="@if(isset($imageSlide->{$imageSizeKey.'_image_url'})){{ $imageSlide->{$imageSizeKey.'_image_url'} }} @elseif(isset($imageSlide[$imageSizeKey])){{ $imageSlide[$imageSizeKey] }} @else{{'https://via.placeholder.com/730x555'}} @endif"
                                 alt="image"
                                 data-object-fit="cover"
                            >
                        @endif
                    @endforeach
                </picture>
            @endforeach

            @if(isset($images) && sizeof($images) > 1)
                <div class="c-projector__control">
                    <div class="c-slide-indicator">
                        @foreach($images as $imageSlide)
                            <button class="c-slide-indicator__button  js-slider-indicator" data-order="{{$loop->index}}"></button>
                        @endforeach
                    </div>
                </div>
            @endif
        </figure>

    </div>
@else
    {{-- Fallback to placeholder, when no image is found --}}
    <div class="c-projector">
        <figure class="c-projector__figure">
            <picture class="c-projector__picture  is-active">
                <img class="c-projector__img" src="/img/placeholder-card.svg" alt="placeholder image" data-object-fit="cover">
            </picture>
        </figure>
    </div>
@endif