{{-- 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 class="c-projector  js-projector" id="{{$imageId}}">

        <figure class="c-projector__figure">

            @foreach($images as $imageSlide)
                <picture class="c-projector__picture  js-projector-slide  @if($loop->index == 1) is-active @endif " data-order="{{$loop->index}}">
                    @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-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="{{$imageSlide->name}}"
                                 data-object-fit="cover" />
                        @endif
                    @endforeach
                </picture>
            @endforeach

        </figure>

        @if(isset($images) && sizeof($images) > 1)
            <button class="c-projector__button  previous  js-projector-button" data-order="{{(sizeof($images) - 1)}}">
                <span class="c-projector__arrow">@include('components.icons.arrow')</span>
            </button>

            <button class="c-projector__button  next  js-projector-button" data-order="1">
                <span class="c-projector__arrow">@include('components.icons.arrow')</span>
            </button>
        @endif

    </div>
@else
    {{-- Fallback to placeholder, when no image is found --}}
    <div class="c-projector">
        <figure class="c-projector__figure">
            <picture class="c-projector__picture  is-active">
                <img class="c-projector__img" src="/img/placeholder-card.svg" alt="placeholder image" data-object-fit="cover">
            </picture>
        </figure>
    </div>

@endif