@php
    $bottomShape = isset($bottomShape) ? $bottomShape : 1;
@endphp

<section class="o-hero">

    @if($page->hero_shape !== 0)
        <div class="o-hero__top-shape">
            <img alt="shape element" src="/img/hero_shape-{{ $page->hero_shape }}.svg" />
        </div>
    @endif

    <div class="o-hero__main">
        <div class="l-contain">
            <div class="o-hero__grid  @if(isset($page->heroImages) && $page->heroImages->isEmpty()) no-image @endif">
                <div class="o-hero__text  @if(isset($page->heroImages) && $page->heroImages->isEmpty()) additional-padding @endif ">

                    @if(isset($showBreadCrumb) && $showBreadCrumb)
                        <div class="u-spacing-mb4">
                            @include('components.breadcrumb')
                        </div>
                    @endif

                    <div class="s-text s-text--on-dark">

                    {!! $page->translation->description !!}

                    @yield('hero-content')

                    @if(!empty($page->translation->button_text) && !empty($page->translation->button_link))
                        <div class="o-hero__button">
                            @include('components.textButton', [
                                'modifiers' => ['on-dark', 'icon'],
                                'textButtonLink' => $page->translation->button_link,
                                'textButtonText' => $page->translation->button_text,
                            ])
                        </div>
                    @endif

                    </div>

                </div>

                <div class="o-hero__image">
                    @if(isset($page->heroImages) && $page->heroImages->isNotEmpty())
                        @include('components.clippedImage', ['image' => $page->heroImages->first(), 'pathId' => $page->hero_image_shape])
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="o-hero__bottom-shape">
        @switch($bottomShape)
            @case(1)
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 114.954"><path d="M0,82.135l1,.047c536.287,25.689,719.319,44.831,1320.093,23.75Q1671.387,93.64,1920,18.6V0H0Z" fill="currentColor"/></svg>
            @break
            @case(2)
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1921.715 214.331"><path d="M0,8.949c274.313,114.4,594.6,205.382,960.858,205.382S1647.4,123.349,1921.715,8.949V0H0Z" fill="currentColor"/></svg>
            @break
        @endswitch
    </div>
</section>