<div class="post-detail">
    <figure class="main @if($page->images->count() == 0) no-images  @endif">
        @if($page->images->count() != 0)
            @foreach($page->images as $key => $image)
                <div data-image="{{$key}}" class="detail-image @if($key == 0) active @endif">
                    <div class="image xlarge"
                         style='background-image: url("{{$image->original_image_url}}")'></div>
                    <div class="image large"
                         style='background-image: url("{{$image->large_image_url}}")'></div>
                </div>
            @endforeach
        @endif
        <a class="category-icon {{$page->categories->first()->code_name}} history-link"
           data-page="blog"
           data-post-page="{{\Session::get('current_page', 1)}}"
           @if(\Session::has('category'))
           data-category="{{ $page->categories->first()->code_name }}"
           href="/{{$links->blog->route}}/{{ $page->categories->first()->code_name }}@if(\Session::get('current_page', 1) != 1){{ '?page='.\Session::get('current_page', 1) }}@endif"
           data-url="/{{$links->blog->route}}/{{ $page->categories->first()->code_name }}@if(\Session::get('current_page', 1) != 1){{ '?page='.\Session::get('current_page', 1) }}@endif"
           @else
           href="/{{$links->blog->route}}@if(\Session::get('current_page', 1) != 1){{ '?page='.\Session::get('current_page', 1) }}@endif"
           data-url="/{{$links->blog->route}}@if(\Session::get('current_page', 1) != 1){{ '?page='.\Session::get('current_page', 1) }}@endif"
                @endif
        >
            <span></span>
        </a>
        @if($page->images->count() > 1)
            <div class="controls">
                <div class="next control" data-image="1">@lang('translations.nextImage')</div>
                <div class="previous control"
                     data-image="{{$page->images->count() - 1}}">@lang('translations.previousImage')</div>
            </div>
        @endif

        <div class="open-relevant">
            <span>+</span>
        </div>
    </figure>


    <section class="relevant-posts {{$page->categories->first()->code_name}}">
        <div class="shader"></div>
        <div class="content">
            <div class="close"><p>@lang('translations.close')</p></div>
            <h3>
                <small>@lang('translations.moreFrom')</small>
                <span>{{ $page->categories->first()->translations->first()->name }}</span>
            </h3>
            <div class="posts">
                @foreach($relevantPosts as $post)
                    <article class="post">
                        <a href="/{{$post->translation->route->route}}"
                           data-url="/{{$post->translation->route->route}}"
                           data-article="{{$post->id}}"
                           data-page="article"
                           class="history-link">
                            <h4>{{$post->translation->name}}</h4>
                            <span class="date">{{$post->date->format('d').' '.trans('translations.month-'.$post->date->format('m')).' '.$post->date->format('Y') }}</span>
                        </a>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="detail-page full-image-block">
        <div class="content-container">
            <article class="right-content">
                <a href="/" data-url="/" data-page="home" class="history-link">
                    <div class="logo black">
                        <span></span>
                    </div>
                </a>

                <header>
                    <h1>
                        {{$page->translation->name}}
                    </h1>
                    <p class="date">
                        {{$page->date->format('d M Y')}}
                    </p>
                </header>

                <div class="text">
                    {{$page->translation->description}}
                </div>

                <div class="post-info">
                    <div class="stripe"></div>
                    <div class="info">
                        <span>@lang('translations.writenBy'):</span>
                        {{$page->author}}
                    </div>
                    <div class="info">
                        <span>@lang('translations.publishedOn'):</span>
                        <p>{{$page->date->format('d').' '.trans('translations.month-'.$page->date->format('m')).' '.$page->date->format('Y') }}</p>
                    </div>
                </div>

                <div class="newsletter">
                    <div class="stripe"></div>
                    <p>
                        <strong>@lang('translations.subscribeMailing')</strong><br/>
                        @lang('translations.subscribeMailing2')
                    </p>
                    <a target="_blank" href="http://eepurl.com/cTyE-1">
                        @lang('translations.subscribeButton')
                    </a>
                </div>

                <div class="comments">
                    <div class="fb-comments"
                         data-href="@if(isset($page->ajax) && $page->ajax){{\Request::root().$page->url}}@else{{\Request::url()}}@endif"
                         data-width="100%"
                         data-numposts="3"></div>
                </div>

                <footer>
                    <div class="navigation">
                        <a class="moveDetailUp top nav-block">
                            <span></span>
                        </a>
                        @if(isset($page->previous))
                            <a
                                    href="/{{$page->previous->translation->route->route}}"
                                    data-url="/{{$page->previous->translation->route->route}}"
                                    data-article="{{$page->previous->id}}"
                                    data-page="article"
                                    class="previous nav-block history-link">
                                <div class="icon"></div>
                                <span>@lang('translations.previousItem')</span>
                            </a>
                        @endif
                        @if(isset($page->next))
                            <a
                                    href="/{{$page->next->translation->route->route}}"
                                    data-url="/{{$page->next->translation->route->route}}"
                                    data-article="{{$page->next->id}}"
                                    data-page="article"
                                    class="next nav-block history-link">
                                <div class="icon"></div>
                                <span>@lang('translations.nextItem')</span>
                            </a>
                        @endif
                    </div>

                    <div class="social-link">


                        <p>@lang('translations.followUs')</p>

                        <span class="icons">
                        <a target="_blank" href="{{\Config::get('business.instagram')}}"><span class="instagram"></span></a>
                        <a target="_blank" href="{{\Config::get('business.linkedin')}}"><span
                                    class="linkedin"></span></a>
                        <a target="_blank" href="{{\Config::get('business.facebook')}}"><span
                                    class="facebook"></span></a>
                    </span>

                    </div>
                </footer>

            </article>

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

@if(isset($page->ajax) && $page->ajax)
    <script id="productJs" type="text/javascript" src="/js/productDetail.js"></script>
@endif