@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-grid  o-block">

        <article class="c-article">

            @if(isset($post->images) && $post->images->count() != 0)
                <picture class="c-article__hero">
                    @foreach(['large', 'medium', 'small'] as $imageSize)
                        @if(!$loop->last)
                            <source
                                @switch($imageSize)
                                    @case('medium')
                                    media="(min-width: 425px)"
                                    @break
                                    @case('large')
                                    media="(min-width: 820px)"
                                    @break
                                @endswitch
                                    srcset="{{ $post->images->first()->{$imageSize.'_image_url'} }}">
                        @else
                            <img src="{{ $post->images->first()->{$imageSize.'_image_url'} }}" alt="{{$post->images->first()->name}}">
                        @endif
                    @endforeach
                </picture>


            @endif

            <h2 class="c-article__heading">{{$post->translation->name}}</h2>

            <div class="c-article__content">
                <div class="c-article__menu">
                    @include('components.optionsMenu', ['model' => $post, 'returnRoute' => $previousRoute])
                </div>

                @include('organisms.components')

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

    @include('organisms.footer')

@endsection