@extends('site.master')

@section('title', $post->translation->meta_title)
@section('meta_description', $post->translation->meta_description)

@section('meta_information')
    <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->isNotEmpty())
        <meta property="og:image" content="{{\Request::root().$post->images->first()->medium_image_url}}"/>
    @endif

@endsection

@section('content')

    <div class="l-main c-post">

        <div class="c-post__title-row  u-bg-neutral--100">
            <div class="l-contain">

                <div class="c-post__back">
                    @include('site.components.button', [
                            'buttonText' => __('site/posts.back_to_blog'),
                            'buttonLink' => $links->posts->route,
                            'buttonType' => 'text',
                            'buttonIcon' => 'arrowLeft',
                            'modifiers' => ['icon','is-reversed'],
                        ])
                </div>

                <h1 class="c-post__title" data-kal="slide-up">{{ $post->translation->name }}</h1>

                <div class="c-post__date" data-kal="slide-up">
                    <strong>@lang('site/posts.date'):</strong>
                    <time datetime="{{ $post->date }}">{{ $post->date->format('d') }} {{ __('calendar.month_names.' . ($post->date->format('n') - 1) ) }} {{ $post->date->format('Y') }}</time>
                </div>

            </div>
        </div>

        <div class="u-bg-neutral--100  u-color-neutral--0  u-overflow-hidden">
            @include('site.components.slant')
        </div>

        @if(isset($post->images) && $post->images->isNotEmpty())
            <div class="c-post__image  l-contain" data-kal="slide-up">
                <picture class="u-clip-path" data-id="clip-path-image-1">
                    @foreach(['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>
            </div>
        @endif

        <div class="c-post__components  @if(!isset($post->images) || $post->images->isEmpty()) c-post__components--no-image @endif" data-kal="slide-up">
            @include('site.organisms.components')
        </div>


        @if($otherModels->count() != 0)

            <div class="o-cards-row u-slant-top u-mb-neg-slant-height">
                <div class="o-cards-row__main">
                    <h2 class="o-cards-row__title  o-cards-row__title--small  u-text-align-center">
                        @lang('site/posts.older_posts')
                    </h2>
                    <ul class="o-cards-row__list">

                        @foreach($otherModels as $postItem)
                            <li class="o-cards-row__item" data-kal="slide-up">
                                @include('site.components.postCard', ['modifiers' => 'on-dark'])
                            </li>
                        @endforeach

                    </ul>

                    <div class="u-spacing-mt8 u-spacing-mb10  u-text-align-center">
                        @include('site.components.button', [
                            'modifiers' => 'roomy',
                            'buttonText' => __('site/posts.back_to_blog'),
                            'buttonLink' => $links->posts->route,
                        ])
                    </div>

                </div>
            </div>

        @endif


    </div>

@endsection