@component('open._layouts.app', [
    'title' => $page->name,
    'meta' => $page->meta(),
])
    <section class="page-list">
        {{ Breadcrumbs::render('page', $page) }}
        <section class="hero" style="background-image: url({{ $page->coverHD }});">
            <div class="container row">
                <div class="col col-7">
                    <header class="c-hero__header">
                        <span>{{ $page->label }}</span>
                        <h1>{{ $page->name }}</h1>
                    </header>
                    <p class="c-hero__description">{{ $page->description }}</p>
                </div>
                <div class="col col-4 placeholder"></div>
            </div>
        </section>
        <section class="container row page-list-container">
                        @foreach($page->children->chunk(3) as $row)
                <div class="row">
                    @foreach($row as $subpage)
                        <div class="col col-4">
                            <article class="with-corner">
                                <header class="with-image">
                                    <h4><a href="{{ $subpage->path() }}">{{ $subpage->name }}</a></h4>
                                    @if(in_array($i, ['0','1','2']))
                                    <figure class="img-bordered vignette-container">
                                        <a href="{{ $subpage->path() }}">
                                        @if($image = $subpage->getFirstMedia('featured'))
                                            <img src="{{ $image->getUrl('smallHor') }}" alt="{{ $image->name }}">
                                        @else
                                            <img src="https://via.placeholder.com/320x240" alt="">
                                        @endif
                                        </a>
                                    </figure>
                                    @endif
                                </header>
                                <div>
                                    <p>{{ $subpage->description }}</p>
                                    <a href="{{ $subpage->path() }}" class="read-more"> @lang('base.readMore')</a>
                                </div>
                            </article>
                        </div>
                                            @endforeach
                </div>
            @endforeach
        </section>

        @if(!$relatedArticles->isEmpty())
            @include('open._layouts._partials.sliderWidget', ['articles'=>$relatedArticles])
        @endif
    </section>
@endcomponent