@extends('site.master')

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

@section('hero-body')
    @include('site.components.heroHeading', [
               'heroHeadingTitle' => ( !empty($page->translation->visual_name) ? $page->translation->visual_name : $page->translation->name),
               'heroHeadingSubTitle' => $page->translation->description,
               'modifiers' => ['large']
           ])
@endsection

@section('content')
    @include('site.components.hero', ['modifiers' => ['no-pull', 'simple']])

    <div class="c-body  o-blocks">
        <div class="l-grid  o-block">

            <section class="t-blog js-post-category">

                <div class="t-blog__content">

                    <div class="o-update-grid__tabs ">
                        <div>
                            @foreach(__('postCategories.categories') as $id => $category)
                                @if(empty($id))
                                <a class="o-update-grid__tab  @if($currentCategory === 'all') active @endif"
                                   href="/{{ $links->posts->route }}">
                                    @lang('site/updates.categories.all')
                                </a>
                                @else
                                <a class="o-update-grid__tab  @if($currentCategory === mb_strtolower($category)) active @endif{{request('filters') !== null && mb_strtolower($category) === request('filters')[0] ? 'active' : '' }} "
                                   href="/{{ $links->posts->route }}/{{ mb_strtolower($category) }}"
                                >
                                    {{$category}}
                                </a>
                                @endif
                            @endforeach
                        </div>
                    </div>

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

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

                                <article class="l-matrix__item  c-thumbnail js-post-article"
                                         data-post-category-id="{{$post->post_category}}">

                                    <a class="c-thumbnail__link"
                                       href="/{{$links->posts->route}}/{{$post->translation->slug}}">

                                        <div class="c-thumbnail__frame  has-hover-effect">
                                            <span class="c-thumbnail__image"
                                                  @if(isset($post->images) && $post->images->count() != 0 && $post->languageImages()->isNotEmpty()) style="background-image: url('{{ $post->languageImages()->first()->small_image_url }}');"  @endif ></span>
                                        </div>


                                        <div class="c-thumbnail__content">
                                            <p class="c-thumbnail__caption">{{ $post->translation->name }}</p>
                                        </div>
                                    </a>
                                </article>

                            @endforeach
                        </div>

                    @else

                        <div class="c-empty">
                            <div class="c-empty__body">
                                @lang('site/posts.noPosts')
                            </div>
                        </div>

                    @endif

                </div>

                <div class="t-blog__footer">
                    {{-- Default Komma Pagination 1 ... 2 c 2 .. 1 =  7 --}}
                    @include('site.components.pagination7', ['paginator' => $posts])

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

            </section>

        </div>

        <div class="l-grid  o-block-bg">
            <div>
                @include('site.components.cta.cta--bar')
            </div>
        </div>
    </div>
@endsection