{{-- 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">
        <div class="c-slide-projector__tray">
            @foreach($images as $imageSlide)
                <picture data-order="{{$loop->index}}" class="c-slide-projector__slide  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" src="@if(isset($imageSlide->{$imageSizeKey.'_image_url'})){{ $imageSlide->{$imageSizeKey.'_image_url'} }}@elseif(isset($imageSlide[$imageSizeKey])){{ $imageSlide[$imageSizeKey] }}@else{{'https://via.placeholder.com/400x300'}}@endif" alt="image">
                        @endif
                    @endforeach
                </picture>
            @endforeach
        </div>

        <div class="c-slide-projector__control">
            <button class="c-slide-projector__button  previous  js-slide-projector__button" data-order="{{(sizeof($images) - 1)}}">
                <span class="c-slide-projector__arrow">@include('site.components.icons.arrow')</span>
            </button>
            <button class="c-slide-projector__button  next  js-slide-projector__button" data-order="1">
                <span class="c-slide-projector__arrow">@include('site.components.icons.arrow')</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="image">
            @endif
        @endforeach
    </picture>
@else
    <div class="c-image">
        <span class="c-image__placeholder"></span>
    </div>
@endif