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

{{ debug($images) }}
@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">
                    <span class="c-slide-projector__img" style="background-image: url('@if(isset($imageSlide->large_image_url)){{ $imageSlide->large_image_url }}@elseif(isset($imageSlide->large_image_url)){{ $imageSlide->large_image_url }}@else{{'https://via.placeholder.com/400x300'}}@endif')" alt="image"></span>
                </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.arrowhead')</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.arrowhead')</span>
            </button>
        </div>
    </div>
@elseif(!empty($images) && is_array($images) && sizeof($images) == 1)
    <span class="c-image" style="background-image: url('@if(isset($images[0]->large_image_url)){{ $images[0]->large_image_url }}@else{{'https://via.placeholder.com/400x300'}}@endif')"></span>
@elseif(is_a($images, \Illuminate\Database\Eloquent\Collection::class) || is_a($images, \Illuminate\Support\Collection::class)) 
    <span class="c-image" style="background-image: url('@if(isset($images->first()->large_image_url)){{ $images->first()->large_image_url }}@else{{'https://via.placeholder.com/400x300'}}@endif')"></span>
@else
    <div class="c-image">
        <span class="c-image__placeholder"></span>
    </div>
@endif