{{-- 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  @if(isset($hideDropShadow) && $hideDropShadow) c-slide-projector--hide-drop-shadow @endif  js-slide-projector">
        <div class="c-slide-projector__tray">
            @foreach($images as $imageSlide)
                <picture data-order="{{$loop->index}}" class="c-slide-projector__slide  @if(isset($disableStretch) && $disableStretch) c-slide-projector--prevent-stretch @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'})){{ str_replace('\\', '/', $imageSlide->{$imageSizeKey.'_image_url'}) }}@elseif(isset($imageSlide[$imageSizeKey])){{ str_replace('\\', '/', $imageSlide[$imageSizeKey]) }}@endif">
                        @else
                            <img class="c-slide-projector__img" src="@if(isset($imageSlide->{$imageSizeKey.'_image_url'})){{ str_replace('\\', '/', $imageSlide->{$imageSizeKey.'_image_url'}) }}@elseif(isset($imageSlide[$imageSizeKey])){{ str_replace('\\', '/', $imageSlide[$imageSizeKey]) }}@else{{'https://via.placeholder.com/400x300'}}@endif" alt="{{ (!empty($imageSlide->name)) ? $imageSlide->name : 'image' }}">
                        @endif
                    @endforeach
                </picture>
            @endforeach
            @if(isset($imageCaption))
                <div class="c-image__caption  c-slide-projector__caption">
                    {!! $imageCaption !!}
                </div>
            @endif
        </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  @if(isset($disableStretch) && $disableStretch) c-image--prevent-stretch @endif  @if(isset($hideDropShadow) && $hideDropShadow) c-image--hide-drop-shadow @endif">

        @if(isset($usePath) && $usePath || \Illuminate\Support\Str::endsWith($images->first()->path, ['.svg']))
            <img src="@if(isset($images->first()->path)){{ str_replace('\\','/',$images->first()->path) }}@elseif(isset($images->first()['path'])){{ str_replace('\\','/',$images->first()['path']) }}@else{{'https://via.placeholder.com/400x300'}}@endif" alt="{{ (!empty($images->first()->name)) ? $images->first()->name : 'image' }}">
        @else
            @foreach($imageSizes as $imageSizeKey => $imageSize)
                @if(!$loop->last)
                    <source
                        media="(max-width: {{$imageSize}}px)"
                        srcset="@if(isset($images->first()->{$imageSizeKey.'_image_url'})){{ str_replace('\\','/',$images->first()->{$imageSizeKey.'_image_url'}) }}@elseif(isset($images->first()[$imageSizeKey])){{ str_replace('\\','/',$images->first()[$imageSizeKey]) }}@endif">
                @else
                    <img src="@if(isset($images->first()->{$imageSizeKey.'_image_url'})){{ str_replace('\\','/',$images->first()->{$imageSizeKey.'_image_url'}) }}@elseif(isset($images->first()[$imageSizeKey])){{ str_replace('\\','/',$images->first()[$imageSizeKey]) }}@else{{'https://via.placeholder.com/400x300'}}@endif" alt="{{ (!empty($images->first()->name)) ? $images->first()->name : 'image' }}">
                @endif
            @endforeach
        @endif

            @if(isset($imageCaption))
                <div class="c-image__caption">
                    {!! $imageCaption !!}
                </div>
            @endif

    </picture>
@else
    <div class="c-image">
        <span class="c-image__placeholder"></span>
    </div>
@endif