@php if(!isset($imageSizes)) $imageSizes = [ 'small' => 480, 'medium' => 1200, 'large' => 1440]; @endphp

@if(isset($images) && sizeof($images) >= 1)
    <div id="{{$imageId}}" class="c-image-rack  {{ $imageRackClasses ?? '' }}  js-image-rack" data-direction="{{ $imageRackDirection }}">

        <div class="c-image-rack__slide-area  js-image-rack-slide">
            @foreach($images as $imageSlide)
                <div class="c-image-rack__item  js-image-rack-item" data-item="{{ $loop->index }}">
                    <picture data-order="{{$loop->index}}" class="c-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="c-image-rack__img" src="@if(isset($imageSlide->{$imageSizeKey.'_image_url'})){{ $imageSlide->{$imageSizeKey.'_image_url'} }}@endif" alt="{{$imageSlide->name}}">
                            @endif
                        @endforeach
                    </picture>
                </div>
            @endforeach
        </div>

        @if(sizeof($images) > 1)
            <div class="c-image-rack__control  c-slider-buttons">
                <button class="c-slider-buttons__item  previous  js-image-rack-button" data-order="{{(sizeof($images) - 1)}}">
                    <span class="c-slider-buttons__arrow">@include('site.components.icons.arrowhead')</span>
                </button>
                <button class="c-slider-buttons__item  next  js-image-rack-button" data-order="1">
                    <span class="c-slider-buttons__arrow">@include('site.components.icons.arrowhead')</span>
                </button>
            </div>
        @endif

    </div>
@endif