@extends('master')

@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')
    @if(!empty(config('services.facebook.appId')))<meta property="fb:app_id" content="{{config('services.facebook.appId')}}"/>@endif
    <meta property="og:url" content="{{ \Request::root() . $_SERVER['REQUEST_URI'] }}"/>
    <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()->medium_image_url}}"/>
    @endif
@endsection

@section('content')

    @if(!empty(config('services.facebook.appId')))
        {{-- 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>
    @endif

    <section class="o-hero">

        <div class="o-hero__top-shape">
            <img alt="shape element" src="/img/hero_shape-2.svg" />
        </div>

        <div class="o-hero__main">
            <div class="l-contain">
                <div class="o-hero__grid">
                    <div class="o-hero__text">
                        <div class="u-spacing-mb2">
                            @include('components.breadcrumb')
                        </div>
                        <div class="s-text s-text--on-dark">
                            <h1>{{ $post->translation->name }}</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="o-hero__bottom-shape">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 114.954"><path d="M0,82.135l1,.047c536.287,25.689,719.319,44.831,1320.093,23.75Q1671.387,93.64,1920,18.6V0H0Z" fill="currentColor"/></svg>
        </div>
    </section>

    @include('organisms.components')

    @if(isset($nextPosts) && $nextPosts->isNotEmpty())
        <div class="l-block  l-contain">

            <hr class="o-blog__divider" />

            <div class="o-blog__others">
                <h3>Lees ook eens dit eens</h3>
                @include('components.button', [ 'buttonLink' => $previousRoute, 'buttonText' => 'Naar overzicht' ])
            </div>
            <div class="o-blog__grid">
                @include('organisms.blog', ['posts' => $nextPosts])
            </div>
        </div>
    @endif

    @include('organisms.componentables.cta', ['componentAreaName' => 'fake'])

@endsection