@php
    $model = $model ?? $page;
    $hero_image = $model->hero->documents->first()->large_image_url ?? '/img/placeholder-hero.svg';
    $hero_active = $model->hero->active;
    $hero_title = $model->hero->title;
    $hero_description = $model->hero->description;
    $hero_buttons = $model->hero->buttons;
    $intro_alt_class = $intro_type ?? null;
@endphp

<div class="o-intro {{$intro_alt_class}}">
    <div class="o-intro__header">
        @include('site.components.pageTitle')
    </div>

    {{-- Hide intro body when hero is not active --}}
    @if($hero_active)
        <div class="o-intro__body">
            <div class="o-intro__main">
                <div class="l-split  l-split--contain  l-split--is-reversed  l-split--breakout-on-m">
                    <div class="l-split__column  l-split__column--vpad  s-text">
                        @if(!empty($hero_title))
                            <h2>{{$hero_title}}</h2>
                        @endif

                        @if(!empty($hero_description))
                            <p>{!! $hero_description !!}</p>
                        @endif

                        @includeWhen(!empty($hero_buttons),'site.components.button', [
                            'modifiers' => ['icon'],
                            'buttonText' => $hero_buttons->translation->label ?? '',
                            'buttonLink' => $hero_buttons->translation->url ?? '',
                        ])
                    </div>
                    <div class="l-split__column">

                        @if(!$model->hero->documents->isEmpty())
                            @include('site.components.image', ['images' => $model->hero->documents, 'imageId' => 'hero-slider' ])
                        @else
                            <img class="u-placeholder-image" src="{{$hero_image}}" data-object-fit="cover"/>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>