{{-- Create a default fall back for the image sizes --}}
@php if(!isset($imageSizes)) $imageSizes = ['large', 'medium', 'small']; @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 $imageSize)
                        @if(!$loop->last)
                            <source
                                @switch($imageSize)
                                @case('medium')
                                    media="(min-width: 425px)"
                                @break
                                @case('large')
                                    media="(min-width: 820px)"
                                @break
                                @case('original')
                                    media="(min-width: 1460px)"
                                @break
                                @endswitch
                                srcset="@if(isset($imageSlide->{$imageSize.'_image_url'})){{ $imageSlide->{$imageSize.'_image_url'} }}@elseif(isset($imageSlide[$imageSize])){{ $imageSlide[$imageSize] }}@endif">
                        @else
                            <img class="c-slide-projector__img" src="@if(isset($imageSlide->{$imageSize.'_image_url'})){{ $imageSlide->{$imageSize.'_image_url'} }}@elseif(isset($imageSlide[$imageSize])){{ $imageSlide[$imageSize] }}@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>@include('site.components.icons.arrow')</span>
            </button>
            <button class="c-slide-projector__button  next  js-slide-projector__button" data-order="1">
                <span>@include('site.components.icons.arrow')</span>
            </button>
        </div>
    </div>

@elseif(!empty($images) && sizeof($images) == 1)
    <picture class="c-image">
        @foreach($imageSizes as $imageSize)
            @if(!$loop->last)
                <source
                        @switch($imageSize)
                        @case('medium')
                        media="(min-width: 425px)"
                        @break
                        @case('large')
                        media="(min-width: 820px)"
                        @break
                        @case('original')
                        media="(min-width: 1460px)"
                        @break
                        @endswitch
                    srcset="@if(isset($images[0]->{$imageSize.'_image_url'})){{ $images[0]->{$imageSize.'_image_url'} }}@elseif(isset($images[0][$imageSize])){{ $images[0][$imageSize] }}@endif">
            @else
                <img src="@if(isset($images[0]->{$imageSize.'_image_url'})){{ $images[0]->{$imageSize.'_image_url'} }}@elseif(isset($images[0][$imageSize])){{ $images[0][$imageSize] }}@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