@if(!empty($heroImages))
    <figure class="c-hero-slider  @if(count($heroImages) > 1) js-slider @endif" id="hero-slider-{{$page->code_name}}">
        <div class="c-hero-slider__frame">
            @for($i = 0; $i < count($heroImages); $i++)
                <picture class="c-hero-slider__picture @if(count($heroImages) > 1) js-slider-slide @endif @if($i == 0) is-active @endif" data-order="{{$i}}">
                    <img class="c-hero-slider__image @if(isset($shapeHeart) && $shapeHeart == true) c-hex-shape__image--heart @endif"
                         src="{{$heroImages[$i]['small_image_url']}}"
                         srcset="{{$heroImages[$i]['large_image_url']}} 576w,
                                 {{$heroImages[$i]['medium_image_url']}} 468w,
                                 {{$heroImages[$i]['small_image_url']}} 360w"
                         sizes="(min-width: 1344px) 576px, (min-width: 1152px) 42.88vw, (min-width: 840px) 26.67vw, 100vw"
                         alt="{{$heroImages[$i]['name']}}" />
                </picture>
            @endfor
        </div>

        @if(count($heroImages) > 1)
            <div class="c-hero-slider__controls">
                <div class="c-hero-slider__knobs">
                    <button class="c-hero-slider__button  previous  js-slider-button" data-order="{{count($heroImages) - 1}}" aria-label="previous image"></button>
                    <button class="c-hero-slider__button  next  js-slider-button" data-order="1" aria-label="next image"></button>
                </div>
                <div class="c-hero-slider__dots">
                    @for($i = 0; $i < count($heroImages); $i++)
                        <div class="c-slide-indicator">
                            <button class="c-slide-indicator__button @if(count($heroImages) > 1) js-slider-indicator @endif @if($i == 0) is-active @endif" data-order="{{$i}}"></button>
                        </div>
                    @endfor
                </div>
            </div>
        @endif
    </figure>
@endif