{{-- 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">

        <figure class="c-projector__figure  js-projector" id="{{$imageId}}">

            @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



            @if(isset($images) && sizeof($images) > 1)
                <div class="c-projector__control">

{{--                    @if(isset($projectorControlType) && $projectorControlType == 1)--}}

                        <div class="c-slide-indicator">
                            @foreach($images as $imageSlide)
                                <button class="c-slide-indicator__button  js-projector-indicator" data-order="{{$loop->index}}"></button>
                            @endforeach
                        </div>

{{--                    @elseif(isset($projectorControlType) && $projectorControlType == 2)--}}

{{--                        <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>
            @endif

        </figure>

    </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/image.svg" alt="placeholder image" data-object-fit="cover">
            </picture>
        </figure>
    </div>

@endif