<section class="article-grid content-container" id="blog">

    <div class="posts-categories">
        <div class="text">
            <p>@lang('translations.sortOnCategory')</p>
        </div>
        <div class="blocks">
            @include('layouts.partials.posts.categories', ['withName' => true])
        </div>
        <div class="placeholder"></div>
    </div>

    <div class="blog-info">
        <a href="/" data-url="/" data-page="home" class="history-link">
            <div class="logo">
                <span></span>
            </div>
        </a>
        <div class="text">
            {{$page->content->blog->translation->description}}
        </div>
        <div class="categories-inline">
            <p>@lang('translations.sortOnCategory')</p>
            @include('layouts.partials.posts.categories')
        </div>
    </div>

    @foreach($posts as $post)
        <article data-category="{{$post->categories->first()->code_name}}"
                 @if($post->images->count() != 0) style="background-image: url('{{ $post->images->first()->medium_image_url }}');" @endif>
            <a data-page="article" data-article="{{$post->id}}" data-url="/{{$post->translation->route->route}}" href="/{{$post->translation->route->route}}" class="history-link">
                <span></span>
                <p>{{$post->translation->name}}</p>
            </a>
        </article>
    @endforeach

    @for($i = 0; $i < (6 - $posts->count()); $i++)
        <article class="placeholder"></article>
    @endfor


    <div class="next-page @if( ! ($posts->getLastPage() != $posts->getCurrentPage())) disable @endif">

        @if($posts->getLastPage() != $posts->getCurrentPage())
            <a  id="nextPage" @if(isset($activeCategory))
               href="/{{$links->blog->route .'/'.$activeCategory.'?page='.($posts->getCurrentPage() + 1) }}"
               data-url="/{{$links->blog->route .'/'.$activeCategory.'?page='.($posts->getCurrentPage() + 1) }}"
               data-category="{{$activeCategory}}"
               @else
               href="/{{$links->blog->route .'?page='.($posts->getCurrentPage() + 1) }}"
               data-url="/{{$links->blog->route .'?page='.($posts->getCurrentPage() + 1) }}"
               @endif
               data-post-page="{{$posts->getCurrentPage() + 1}}"
               data-page="blog"
               data-direction="next"
               class="history-link">


                <div class="placeholder">
                    <div class="arrow"></div>
                    <span>@lang('translations.nextItems')</span>
                </div>
            </a>
        @else
            <p class="align-middle">
                @lang('translations.noNextPage')
            </p>
        @endif

    </div>

    <div class="previous-page @if( ! ($posts->getCurrentPage() != 1)) disable @endif">
        @if($posts->getCurrentPage() != 1)


            <a id="previousPage" @if(isset($activeCategory))
               href="/{{$links->blog->route .'/'.$activeCategory.'?page='.($posts->getCurrentPage() - 1) }}"
               data-url="/{{$links->blog->route .'/'.$activeCategory.'?page='.($posts->getCurrentPage() - 1) }}"
               data-category="{{$activeCategory}}"
               @else
               href="/{{$links->blog->route .'?page='.($posts->getCurrentPage() - 1) }}"
               data-url="/{{$links->blog->route .'?page='.($posts->getCurrentPage() - 1) }}"
               @endif
               data-post-page="{{$posts->getCurrentPage() - 1}}"
               data-page="blog"
               data-direction="previous"
               class="history-link">

                <div class="placeholder">
                    <div class="arrow"></div>
                    <span>@lang('translations.previousItems')</span>
                </div>
            </a>
        @else

            @include('forms.mailChimp')

            {{--<p class="align-middle">--}}
                {{--@lang('translations.stayTuned')--}}
            {{--</p>--}}
        @endif
    </div>
</section>