@extends('site.base')

@section('title', $post->translation->meta_title != '' ? $post->translation->meta_title : $post->translation->name .' | '. $page->translation->name .' | '. config('site.company.name'))
@section('meta_description', $post->translation->meta_description)

@section('meta_information')
    <meta property="fb:app_id" content="{{config('services.facebook.appId')}}"/>
    <meta property="og:url" content="{{\Request::url()}}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title"
          content="{{$post->translation->meta_title }}"/>
    <meta property="og:description" content="{{$post->translation->meta_description}}"/>

    @if(isset($post->images) && $post->images->count() != 0)
        <meta property="og:image" content="{{\Request::root().$post->images->first()->large_image_url}}"/>
    @endif
@endsection

@section('base-content')

    {{-- Make a facebook app for this application --}}
    <script>
        window.fbAsyncInit = function () {
            FB.init({
                appId: '{{config('services.facebook.appId')}}',
                autoLogAppEvents: true,
                xfbml: true,
                version: 'v3.1'
            });
        };

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>


    @include('site.organisms.header')
    @include('site.organisms.header', ['isSticky' => true])
    @include('site.organisms.overlayMenu')

    {{-- Hero small version --}}
    <div class="o-hero  o-hero--small">
        <div class="u-bg-triangle-primary"></div>
        <div class="o-hero__main">
            <div class="o-hero__figure">
                @if(isset($post->images) && $post->images->count() != 0)
                    <div class="c-hex-shape">

                        <figure class="c-hero-slider">
                            <div class="c-hero-slider__frame">
                                <picture class="c-hero-slider__picture  is-active">
                                    <img class="c-hero-slider__image"
                                         src="{{$post->images->first()['large_image_url']}}"
                                         alt="{{$post->images->first()['name']}}" />
                                </picture>
                            </div>
                        </figure>

                    </div>
                @endif
            </div>
            <div class="o-hero__content">

                <div class="o-hero__back" >
                    @include('site.components.button', [
                        'buttonText' => __('site/posts.backToLabel'),
                        'buttonLink' => $links->posts->route,
                        'type' => 'text',
                        'modifiers' => ['icon', 'on-dark', 'is-reversed']
                    ])
                </div>

                <h1 class="o-hero__header">{{$post->translation->name}}</h1>

                <time class="o-hero__title" datetime="{{ $post->date->format('Y-m-d') }}">
                    {{ $post->date->day }} @lang('calendar.month_names_short.' . ($post->date->month - 1)) {{$post->date->year}}
                </time>

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

    <div class="u-bg-wrapper">
        <div class="u-ornament-triangle"></div>
        <article class="o-article">
            @include('site.organisms.components')
        </article>
        <div class="l-contain  o-block">
            @include('site.components.share', [
                'messageName' => $post->translation->name,
                'messageSummary' => $post->translation->meta_description
            ])
        </div>
    </div>

    @if($posts->count() >= 1)
        <div class="u-bg-wrapper  u-bg-half-neutral--100">
            <div class="l-contain  o-block">

                <div class="l-newsgrid">
                    <h2 class="l-newsgrid__header">@lang('site/posts.readMoreHeader')</h2>

                    <ul class="l-newsgrid__list">
                        @if($nextPosts->count() != 0)
                            @foreach($nextPosts as $model)
                                <li class="l-newsgrid__item">
                                    @include('site.organisms.newscard', ['parentRoute' => $links->posts->route])
                                </li>
                            @endforeach
                        @else
                            <li class="l-newsgrid__item">
                                @include('site.organisms.newscard', ['model' => $latestPost, 'parentRoute' => $links->posts->route])
                            </li>
                            <li class="l-newsgrid__item">
                                <div class="c-newscard">
                                    <article class="c-newscard__frame">
                                        <div class="c-newscard__content  c-newscard__content--message">
                                            <h2 class="u-fs-m  u-color-primary--500">@lang('site/posts.noMorePosts')</h2>
                                        </div>
                                    </article>
                                </div>
                            </li>
                        @endif
                    </ul>

                    <div class="l-newsgrid__footer">
                        @include('site.components.button', [
                            'buttonText' => __('site/posts.readMoreButtonLabel'),
                            'buttonLink' => $links->posts->route,
                            'type' => 'text',
                            'modifiers' => ['icon', 'is-reversed']
                        ])
                    </div>

                </div>
            </div>
        </div>
    @endif

    @include('site.organisms.calloutBar', ['showCalloutBarOrnament' => true])

    @include('site.organisms.footer')

@endsection