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

@if(isset($images) && sizeof($images) > 1)
    <div id="{{$imageId}}" class="c-slide-projector  js-slide-projector" data-auto-slide="{{ $autoSlide ?? false }}">

        <div class="c-slide-projector__tray">
            @foreach($images as $imageSlide)
                <picture data-order="{{$loop->index}}" class="c-slide-projector__slide  @if($loop->iteration == 1) is-active @endif  js-slide-projector-slide">
                    @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-slide-projector__img  u-object-cover  @if(isset($imageFit) && $imageFit) c-slide-projector__img--fit @endif" src="@if(isset($imageSlide->{$imageSizeKey.'_image_url'})){{ $imageSlide->{$imageSizeKey.'_image_url'} }}@elseif(isset($imageSlide[$imageSizeKey])){{ $imageSlide[$imageSizeKey] }}@else{{'https://via.placeholder.com/400x300'}}@endif" @if(isset($imageFit) && $imageFit) data-object-fit="cover" @endif alt="{{$imageSlide->name}}">
                        @endif
                    @endforeach

                    @if(!empty($withCaption))
                        <p class="c-slide-projector__caption">{{ $imageSlide->name }}</p>
                    @endif
                </picture>
            @endforeach
        </div>

        <div class="c-slide-projector__control  c-slider-buttons">
            <button class="c-slider-buttons__item  previous  js-slide-projector-button" data-order="{{(sizeof($images) - 1)}}">
                <span class="c-slider-buttons__arrow">@include('site.components.icons.arrowhead')</span>
            </button>
            <button class="c-slider-buttons__item  next  js-slide-projector-button" data-order="1">
                <span class="c-slider-buttons__arrow">@include('site.components.icons.arrowhead')</span>
            </button>
        </div>

    </div>

@elseif(!empty($images) && sizeof($images) == 1)
    <picture class="c-image">
        @foreach($imageSizes as $imageSizeKey => $imageSize)
            @if(!$loop->last)
                <source
                        media="(max-width: {{$imageSize}}px)"
                        srcset="@if(isset($images[0]->{$imageSizeKey.'_image_url'})){{ $images[0]->{$imageSizeKey.'_image_url'} }}@elseif(isset($images[0][$imageSizeKey])){{ $images[0][$imageSizeKey] }}@endif">
            @else
                <img src="@if(isset($images[0]->{$imageSizeKey.'_image_url'})){{ $images[0]->{$imageSizeKey.'_image_url'} }}@elseif(isset($images[0][$imageSizeKey])){{ $images[0][$imageSizeKey] }}@else{{'https://via.placeholder.com/400x300'}}@endif" alt="{{$images[0]->name}}" @if(isset($imageFit) && $imageFit) data-object-fit="cover" class="u-object-cover" @endif >
            @endif
        @endforeach
        @if(!empty($withCaption))
            <p class="c-image__caption">{{ $images[0]->name }}</p>
        @endif
    </picture>
@else
    <div class="c-image">
        <span class="c-image__placeholder"></span>
    </div>
@endif