@extends('site.master')

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

@section('content')

    <div class="l-main">

        <div class="o-block--top">
            <div class="l-contain  s-text">
                <h1 class="u-spacing-mb4">{{ $page->translation->visual_name }}</h1>
                @if(!empty($page->translation->description))<div style="max-width: 800px;">{!! $page->translation->description !!}</div>@endif
            </div>
        </div>

        @if(isset($components) && $components->isNotEmpty())
            <div class="o-block">
                @include('site.organisms.components')
            </div>
        @endif

        <div class="o-post-overview">

            <div class="u-bg-neutral--0  u-color-neutral--100  u-overflow-hidden">
                @include('site.components.slantReversed')
            </div>

            <div class="u-bg-neutral--100 u-spacing-pb10">
                <div class="l-contain">

                    @if($posts->isNotEmpty())

                        <div class="o-post-overview__items">
                            @foreach($posts as $post)

                                <article class="o-post-overview__item" data-kal="slide-up" style="--kal-delay: {{$loop->index}}*100ms;">
                                    <a class="o-post-overview__link" href="{{ $links->posts->route. '/' . $post->translation->slug }}">

                                        <figure class="o-poster-overview__figure">
                                            @if(isset($post->images) && $post->images->isNotEmpty())
                                                <img class="u-clip-path" data-id="{{ ($loop->index % 2) ? "clip-path-image-1" : "clip-path-image-2" }}" alt="{{ $post->images->first()->name }}" src="{{ $post->images->first()->small_image_url }}"/>
                                            @else
                                                <div class="o-poster-overview__img-fallback  u-clip-path" data-id="{{ ($loop->iteration % 2) ? "clip-path-image-1" : "clip-path-image-2" }}"></div>
                                            @endif
                                        </figure>

                                        <div class="o-poster-overview__content">
                                            <h2 class="c-poster__title">{{ $post->translation->name }}</h2>
                                            <div class="u-color-secondary--400  u-spacing-mb2">
                                                <img class="o-poster-overview__date-icon" alt="calender icon" src="/img/calendar.svg" width="16" height="16" />
                                                {{ $post->date->format('d-m-Y') }}
                                            </div>
                                            @if(!empty($post->translation->description))
                                                <div class="o-poster-overview__teaser  u-spacing-mt2  u-spacing-mb2">{!! nl2br($post->translation->description) !!}</div>
                                            @endif

                                            <div class="u-spacing-mt4">
                                                @include('site.components.button', [
                                                    'buttonText' => __('site/locations.read_more'),
                                                    'isButton' => true
                                                ])
                                            </div>
                                        </div>

                                    </a>
                                </article>

                            @endforeach
                        </div>

                        @if($posts->hasPages())
                            <div class="o-post-overview__pagination  u-spacing-pt8  u-spacing-pb8">
                                {{-- Default Komma Pagination 1 ... 2 c 2 .. 1 =  7 --}}
                                @include('site.components.pagination7', ['paginator' => $posts])
                            </div>
                        @endif

                    @else
                        <h3 class="u-text-align-center  u-spacing-pt4  u-spacing-pb8">@lang('site/posts.noPosts')</h3>
                    @endif

                </div>
            </div>
        </div>
    </div>

@endsection