@php if(!isset($imageSizes)) $imageSizes = [ 'small' => 690, 'medium' => 691]; @endphp

@if(isset($images) && sizeof($images) > 1)
    <div class="o-image-rack  js-image-rack" @if(!empty($imageId)) id="{{$imageId}}" @endif>
        <div class="o-image-rack__main">

            <div class="o-image-rack__controls">
                <div class="o-image-rack__knobs">
                    <button class="o-image-rack__button  previous  js-image-rack-button" data-order="{{(sizeof($images) - 1)}}" aria-label="vorige afbeelding"></button>
                    <button class="o-image-rack__button  next  js-image-rack-button" data-order="1" aria-label="volgende afbeelding"></button>
                </div>
            </div>
            
            <div class="o-image-rack__slide-area  js-image-rack-slide">
                @foreach($images as $imageSlide)
                    <div class="o-image-rack__item  js-image-rack-item" data-item="{{ $loop->index }}">
                        <picture data-order="{{$loop->index}}" class="o-image-rack__picture  ">
                            @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="o-image-rack__img" src="@if(isset($imageSlide->{$imageSizeKey.'_image_url'})){{ $imageSlide->{$imageSizeKey.'_image_url'} }}@endif" alt="{{$imageSlide->name}}">
                                @endif
                            @endforeach
                        </picture>
                    </div>
                @endforeach
            </div>



        </div>

    </div>
@endif