@if(isset($page->heroVideo))
    @php
        if(!isset($imageSizes)) $imageSizes = [ 'small' => 839, 'medium' => 1151, 'large' => 1152];
        $images = $page->heroImage->documents;
        $caption = $page->heroImage->caption;
        $videoUrl = $page->heroVideo->url;
        $videoAutoplay = $page->heroVideo->autoplay;
    @endphp

    <div class="c-hero">
        <div class="c-hero__main">
            @if($videoUrl)
                <div class="c-hero__video">
                    @include('components.video', [
                        'videoLink' => $videoUrl,
                        'videoAutoplay' => $videoAutoplay,
                        'videoDisableKB' => 1,
                        'videoControls' => 0,
                        'videoPlayerId' => 'home-hero-video',
                        'videoClass' => 'c-video--dark'
                    ])
                </div>
            {{-- The slider contains 1 or more images --}}
            @elseif(isset($images) && $images->count() >= 1)
                <div class="c-hero__slider  @if($images->count() > 1) js-slider @endif" id="hero-slider-{{$page->code_name}}">
                    @foreach($images as $image)
                        <picture class="c-hero__picture  @if($images->count() > 1) js-slider-slide @else is-active @endif" data-order="{{$loop->index}}">
                            @foreach($imageSizes as $imageSizeKey => $imageSize)
                                @if(!$loop->last)
                                    <source media="(max-width: {{$imageSize}}px)"
                                            srcset="@if(isset($image->{$imageSizeKey.'_image_url'})){{ $image->{$imageSizeKey.'_image_url'} }} @elseif(isset($image[$imageSizeKey])){{ $image[$imageSizeKey] }}@endif">
                                @else
                                    <img class="c-hero__image"
                                         src="@if(isset($image->{$imageSizeKey.'_image_url'})){{ $image->{$imageSizeKey.'_image_url'} }} @elseif(isset($image[$imageSizeKey])){{ $image[$imageSizeKey] }} @endif"
                                         alt="">
                                @endif
                            @endforeach
                        </picture>
                    @endforeach

                    {{-- The controls are only visible if more than 1 image is set --}}
                    @if(isset($images) && $images->count() > 1)
                        <div class="c-hero__controls">
                            <div class="c-slide-indicator">
                                @foreach($images as $image)
                                    <button class="c-slide-indicator__dot  js-slider-indicator  is-active" data-order="{{$loop->index}}"></button>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            @else
            {{-- To indicate there are no hero images set show the placeholder image --}}
                <div class="c-hero__slider">
                    <picture class="c-hero__picture  is-active" style="width: 100%; height: 100%;">
                        <img class="c-hero__image" src="/img/placeholder-hero.svg" >
                    </picture>
                </div>
            @endif


            <h2 class="c-hero__caption">
                <span class="c-hero__title">High performance batteries</span>
                <span class="c-hero__subtitle">Made to power any application</span>
            </h2>

{{--            --}}{{-- The caption is only shown when set--}}
{{--            @if(!$videoUrl && !empty($caption))--}}
{{--                <h2 class="c-hero__caption">{!! $caption !!}</h2>--}}
{{--            @endif--}}
        </div>

{{--        --}}{{-- Scroll to button scrolls to the first component --}}
{{--        <a class="c-hero__scroll  js-scroll-to-target" href="#component-item-1">--}}
{{--            @include('components.icons.arrow')--}}
{{--        </a>--}}
    </div>
@endif