@php
    if(!isset($imageSizes)) $imageSizes = [ 'medium' => 720, 'large' => 1440];
    $images = $heroImages;
    $captionTop = $page->translation->headline_top;
    $captionBottom = $page->translation->headline_bottom;
@endphp

<div class="c-hero  @if($images->count() > 1) js-hero-slider @endif" id="hero-slider-{{$page->code_name}}" data-auto-slide="false">
    <div class="c-hero__main">

        {{-- The slider contains 1 or more images --}}
        @if(isset($images) && $images->count() >= 1)
            <div class="c-hero__slider" data-kal="fade" style="--kal-duration: 1.8s;">
                <div class="c-hero__tray">
                    @foreach($images as $image)
                        <picture class="c-hero__picture  @if($images->count() > 1) js-hero-slider-slide @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
                </div>

                {{-- 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-hero-slider-indicator  is-active" data-order="{{$loop->index}}"></button>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <div class="c-hero__looking-glass" data-kal="zoom-in" style="--kal-duration: 2.2s;">
                @foreach($images as $image)
                    <div class="c-hero__looking-glass-slide  @if($images->count() > 1) js-hero-slider-lg @else is-active @endif" data-order="{{$loop->index}}"
                         style="background-image: url({{$image->large_image_url}});">
                    </div>
                @endforeach
            </div>

        @endif

        <div class="c-hero__headline-box">
            <h2 class="c-hero__headline">
                @if(!empty($captionTop))
                    <span class="c-hero__caption-top" data-kal="slide-down" style="--kal-duration: 2.6s;">{!! $captionTop !!}</span>
                @endif
                @if(!empty($captionBottom))
                    <span class="c-hero__caption-bottom" data-kal="slide-up" style="--kal-duration: 3s;">{!! $captionBottom !!}</span>
                @endif
            </h2>

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

    </div>

    <div class="c-hero__description">
        <div class="c-hero__description-text" data-kal="slide-up" style="--kal-duration: 2.6s;">
            @if($page->translation && !empty($page->translation->description))
                {{ $page->translation->description }}
            @else
                <span>Description is niet ingevuld</span>
            @endif
        </div>
    </div>
</div>