<div class="images">
    @if(isset($images) && sizeof($images) > 1)
        <div id="{{$imageId}}" class="image-slider">
            <div class="placeholder">
                @foreach($images as $imageSlide)
                    <figure data-order="{{$loop->index}}" class="image-placeholder">
                        @foreach($imageSizes as $imageSize)
                            <span class="{{$imageSize}}"
                                  style="background-image: url('@if(isset($imageSlide->{$imageSize.'_image_url'})){{ $imageSlide->{$imageSize.'_image_url'} }}@else{{ $imageSlide[$imageSize] }}@endif');"
                            ></span>
                        @endforeach
                    </figure>
                @endforeach

                <div class="controllers">
                    <div class="nav-item previous"
                         data-order="{{(sizeof($images) - 1)}}">
                        <span>@include('svg.arrow')</span>
                    </div>

                    <div class="nav-item next" data-order="1">
                        <span>@include('svg.arrow')</span>
                    </div>
                </div>
            </div>
        </div>
    @elseif(isset($images) && sizeof($images) == 1)
        <picture>
            @foreach($imageSizes as $imageSize)
                @if(!$loop->last)
                    <source
                    @switch($imageSize)
                        @case('small')
                            media="(max-width: 425px)"
                        @break
                        @case('medium')
                            media="(max-width: 820px)"
                        @break
                        @case('large')
                            media="(max-width: 1460px)"
                        @break
                    @endswitch srcset="@if(isset($images[0]->{$imageSize.'_image_url'})){{ $images[0]->{$imageSize.'_image_url'} }}@else{{ $images[0][$imageSize] }}@endif">
                @else
                    <img src="@if(isset($images[0]->{$imageSize.'_image_url'})){{ $images[0]->{$imageSize.'_image_url'} }}@else{{ $images[0][$imageSize] }}@endif" alt="image">
                @endif
            @endforeach
        </picture>
    @else
        <span class="image-placeholder"></span>
    @endif
</div>