@extends('site.master', [ 'headerIsLight' => true ])

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')

    @if(request()->get('page', 1) == 1 && isset($latestPost))

        <section class="o-post-index-opener">
            <div class="l-contain  o-post-index-opener__flex">

                <h1 class="o-post-index-opener__title">{{$page->translation->name}}</h1>

                <a href="{{$links->posts->route . '/' . $latestPost->translation->slug}}" class="o-post-index-opener__main">

                    <div class="o-post-index-opener__image">
                        <figure class="o-post-index-opener__figure">
                            @if(isset($latestPost->images) && $latestPost->images->count() != 0)
                                <picture class="o-post-index-opener__picture">
                                    <source media="(max-width: 550px)" srcset="{{ $latestPost->images->first()->small_image_url }}">
                                    <source media="(max-width: 1000px)" srcset="{{ $latestPost->images->first()->medium_image_url }}">
                                    <img class="u-object-cover" alt="{{$latestPost->images->first()->name}}" src="{{$latestPost->images->first()->large_image_url}}" data-object-fit="cover" />
                                </picture>
                            @endif
                        </figure>
                    </div>

                    <div class="o-post-index-opener__content">

                        <h2 class="o-post-index-opener__article-title">
                            {{ $latestPost->translation->name }}
                        </h2>

                        <div class="o-post-index-opener__description">
                            <p class="o-post-index-opener__text">{{ nl2br( $latestPost->translation->meta_description ) }}</p>
                            <div class="o-post-index-opener__button">
                                @include('site.components.textButton', [
                                'textButtonText' => __('site/posts.read_on'),
                                'isButton' => true,
                                'modifiers' => 'icon'
                                ])
                            </div>
                        </div>

                    </div>

                </a>

            </div>
        </section>

{{--        <section class="o-post-index-mmh">--}}
{{--            <div class="l-contain  o-post-index-mmh__flex">--}}
{{--                <div class="o-post-index-mmh__text">--}}
{{--                    @include('site.organisms.components', ['componentLayout' => 'none'])--}}
{{--                </div>--}}

{{--                <div class="o-post-index-mmh__main">--}}
{{--                    @include('site.components.mmhCategories')--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </section>--}}

    @endif



    <section class="o-posts-overview  @if($posts->total() <= 1)  o-posts-overview--no-pagination @endif">
        <div class="l-contain">

{{--            <h2 class="o-posts-overview__title">--}}
{{--                @if(request()->get('page', 1) == 1)--}}
{{--                    @lang('site/posts.most_recent')--}}
{{--                @else--}}
{{--                    @lang('site/posts.overview_title')--}}
{{--                @endif--}}
{{--            </h2>--}}

            <div class="o-posts-overview__main">

                @if($posts->count() != 0)

                    <div class="l-grid">
                        @foreach($posts as $post)

                            <article class="l-grid__item">
                                @include('site.components.card', [
                                    'cardImage' => $post->images->isNotEmpty() ? $post->images->first()->medium_image_url : null,
                                    'cardTitle' => $post->translation->name,
                                    'cardLink' => $links->posts->route . '/' . $post->translation->slug,
                                    'cardButtonText' => __('site/posts.to_article'),
                                    'clickable' => true
                                 ])
                            </article>

                        @endforeach
                    </div>

                @else

                    <div class="u-spacing-mb-60">
                        <h4 class="u-color-primary">@lang('site/posts.no_posts')</h4>
                    </div>

                @endif

            </div>

            @if($posts->total() > 1)
                <div class="o-posts-overview__pagination">

                    {{-- Default Komma Pagination 1 ... 2 c 2 .. 1 =  7 --}}
                    @include('site.components.pagination.list', ['paginator' => $posts])

                    {{-- Default Laravel Pagination 2 ... 3 c 3 ... 2 = 11 --}}
                    {{--        {{$posts->links()}}--}}

                </div>
            @endif

        </div>
    </section>

    @include('site.organisms.cta')

@endsection