{{-- Create a default fall back for the image sizes --}}
@php
    // Sizes for projector
    if(!isset($imageSizes)) $imageSizes = [ 'small' => 440, 'medium' => 900, 'large' => 1440];

    // Projector navigationMethods
    // Available; 0:dots, 1:arrows, 2:none
    $imageNavigationMethod = (isset($imageNavigationMethod)) ? $imageNavigationMethod : 1;

    // Projector auto-slide
    // Default auto-slide is disabled, because we don't like it...
    $imageAutoSlide = (isset($imageAutoSlide)) ? $imageAutoSlide : 0;

@endphp

@if(isset($images) && sizeof($images) >= 1)

    <figure class="c-projector  js-slider" id="{{$imageId}}" data-auto-slide="{{ $imageAutoSlide }}">

        @if(isset($caption) && !empty($caption) )
            <figcaption class="c-projector__caption">
                {{$caption}}
            </figcaption>
        @endif

        @foreach($images as $imageSlide)
            <picture class="c-projector__picture  js-slider-slide  @if($loop->iteration == 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"
                             width="444px" height="296px"
                             src="@if(isset($imageSlide->{$imageSizeKey.'_image_url'})){{ $imageSlide->{$imageSizeKey.'_image_url'} }} @elseif(isset($imageSlide[$imageSizeKey])){{ $imageSlide[$imageSizeKey] }} @else{{'https://via.placeholder.com/730x555'}} @endif"
                             alt="image"
                             data-object-fit="cover"
                        >
                    @endif
                @endforeach
            </picture>
        @endforeach

        @if(isset($images) && sizeof($images) > 1 && $imageNavigationMethod != 2)
            <div class="c-projector__control">
                <div class="c-slide-indicator">
                    @switch($imageNavigationMethod)
                        @case(1)
{{--                            <button class="c-slide-indicator__button  js-slider-button" aria-label="previous">@include('components.icons.doubleArrow')</button>--}}
                        <button class="c-slide-indicator__button  js-slider-button" aria-label="next">@include('components.icons.doubleArrow')</button>
                        @break

                        @default
                        @foreach($images as $imageSlide)
                            <button class="c-slide-indicator__dot  js-slider-indicator  @if($loop->iteration == 1) is-active @endif" data-order="{{$loop->index}}"></button>
                        @endforeach
                        @break
                    @endswitch
                </div>
            </div>
        @endif
    </figure>

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