@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;
@endphp

<div class="o-intro">
    <div class="o-intro__header">

        <div class="c-page-title">
            @if(!empty($backToLink) && !empty($backToLabel))
                <div class="c-page-title__preheading">
                    <a class="o-intro__button  c-textbutton  c-textbutton--icon  c-textbutton--is-reversed" href="{{$backToLink}}">
                        <span class="c-textbutton__text">{!! $backToLabel !!}</span>
                        <i class="c-textbutton__icon">@include('components.icons.arrow')</i>
                    </a>
                </div>
            @endif
            <h1 class="o-intro__heading  c-page-title__heading">{{$model->translation->name}}</h1>
        </div>

    </div>

    {{-- Hide intro body when hero is not active --}}
    @if($hero_active)
        <div class="o-intro__body">
            <div class="o-intro__content">
                <div class="o-intro__text  s-text">
                    @if(!empty($hero_title))
                        <h2>{{$hero_title}}</h2>
                    @endif

                    @if(!empty($hero_description))
                        {!! $hero_description !!}
                    @endif

                    @includeWhen(!empty($hero_buttons),'components.button', [
                        'modifiers' => ['icon'],
                        'buttonText' => $hero_buttons->translation->label ?? '',
                        'buttonLink' => $hero_buttons->translation->url ?? '',
                    ])
                </div>
                <div class="o-intro__image">
                    @if(!$model->hero->documents->isEmpty())
                        @include('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>
    @endif
</div>