@php
    if(!isset($heroModel)) $heroModel = $page;
    if(!isset($heroModel->heroImages)) dd('Hero: HeroModel does not contain the heroImages attribute');
@endphp

<div class="o-hero
    @if(isset($heroHasInfo) && $heroHasInfo) o-hero--has-info @endif
    @if(count($heroModel->heroImages) >= 2) js-slider @endif"
    id="hero-slider-{{$heroModel->code_name}}">

    <figure class="o-hero__figure">
        <div class="o-hero__frame">
            @if(count($heroModel->heroImages))
                @for($i = 0; $i < count($heroModel->heroImages); $i++)
                    <picture class="o-hero__picture @if(count($heroModel->heroImages) > 1) js-slider-slide @endif @if($i == 0) is-active @endif" data-order="{{$i}}">
                        <img class="o-hero__image"
                             src="{{$heroModel->heroImages[$i]['small_image_url']}}"
                             srcset="{{$heroModel->heroImages[$i]['small_image_url']}} 320w,
                                     {{$heroModel->heroImages[$i]['medium_image_url']}} 821w,
                                     {{$heroModel->heroImages[$i]['large_image_url']}} 1152w"
                             sizes="(max-width: 1152px) 100vw, 1152px"
                             alt="{{$heroModel->heroImages[$i]['name']}}" />
                    </picture>
                @endfor

            @else
                <picture class="o-hero__picture  is-active">
                    <img src="/img/no-image-hero-large.gif" alt="" />
                </picture>
            @endif
        </div>
    </figure>

    {{-- Only show panel/buttons when more than 1 image --}}
    @if(count($heroModel->heroImages) >= 2)
        <div class="o-hero__panel">
            @if($heroHasInfo ?? false)
                <div class="o-hero__info">
                    <p class="o-hero__label">Titel van de hero slide</p>
                    @include('components.button', [
                        'modifiers' => ['icon', 'small'],
                        'buttonText' => 'Bekijk link',
                        'buttonLink' => '#0',
                        'type' => 'text',
                    ])
                </div>
            @endif

            <div class="o-hero__nav">
                <div class="o-hero__indicator">
                    <div class="o-hero__count  o-hero__count--current  js-slider-current-index">1</div>
                    <div class="o-hero__meter">
                        <div class="o-hero__value  js-slider-meter-value" style="transform: scaleX(0);"></div>
                    </div>
                    <div class="o-hero__count">{{count($heroModel->heroImages)}}</div>
                </div>
                <div class="o-hero__buttons">
                    <button class="o-hero__button  previous  js-slider-button" data-order="{{count($heroModel->heroImages) - 1}}" aria-label="previous image">@include('components.icons.arrowheadLargeLeft')</button>
                    <button class="o-hero__button  next  js-slider-button" data-order="1" aria-label="next image">@include('components.icons.arrowheadLargeRight')</button>
                </div>
            </div>

        </div>
    @endif

</div>