@extends('base')

@section('title', $post->translation->name . ' | ' . $page->translation->meta_title)
@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()->get('original_path')}}"/>
    <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('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('organisms.header', [ 'headerIsLight' => true ])

    <div class="l-body">

        @if(isset($post->images) && $post->images->isNotEmpty())
            <div class="o-hero">
                <picture class="o-hero__frame">
                    <source media="(max-width: 475px)"
                            srcset="{{ $post->images->first()->small_image_url }}">
                    <source media="(max-width: 900px)"
                            srcset="{{ $post->images->first()->medium_image_url }}">
                    <img class="o-hero__img" data-kal="photo-zoom-out"
                         src="{{ $post->images->first()->large_image_url }}"
                         alt="{{$post->images->first()->name}}"/>
                </picture>
            </div>
        @endif

        <article class="l-block  l-contain  u-spacing-pt5">

            @include('components.breadcrumb', [ 'breadcrumbNameOverrule' => [ 3 => $post->translation->name]])

            <div class="o-post  u-spacing-mt5">
                <div class="o-post__main">
                    <h2 class="c-page-title" data-kal="slide-left">{{$post->translation->name}}</h2>
                    <p class="u-color-secondary--500  u-fs-s" data-kal="slide-right">{{ $post->date->format('j') }} @lang('calendar.month_names.' . ($post->date->format('n') - 1)) {{ $post->date->format('Y') }}</p>

                    <div class="u-spacing-mt5  s-text">
                        {!! $post->translation->description !!}
                    </div>
                </div>
                <div class="o-post__side">

                    @if(isset($post->author))
                        <div class="u-text-align-center" data-kal="slide-left">
                            @if(isset($post->author->images) && $post->author->images->isNotEmpty())
                                <img class="o-post__author-image" src="{{ $post->author->images->first()->small_image_url }}" alt="auteur"/>
                            @else
                                <div class="o-post__author-image  o-post__author-image--empty"></div>
                            @endif
                            <h3 class="u-spacing-mt4  u-fs-xl  u-color-primary--500  u-fw-extraBold">{{ $post->author->name }}</h3>
                            <p class="u-fw-extraBold">{{ $post->author->translation->function }}</p>
                        </div>
                    @endif

                </div>
            </div>

        </article>
    </div>

    @include('organisms.footer')

@endsection