@extends('site.base')

@section('title', $update->translation->meta_title)
@section('meta_description', $update->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="{{$update->translation->meta_title }}"/>
    <meta property="og:description" content="{{$update->translation->meta_description}}"/>

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

    @if(isset($update->used_fallback_translation) && $update->used_fallback_translation)
        <meta name="robots" content="noindex">
    @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.stickyHeader')

    @include('site.components.overlayMenu')

    @if(isset($update->images) && $update->images->isNotEmpty())
        @include('site.components.hero', ['modifiers' => ['collapse', 'light-bg']])
    @else
        @include('site.components.hero', ['modifiers' => ['x-collapse', 'light-bg']])
    @endif

    <div class="c-body  o-blocks">

        <div class="l-grid  o-block  u-overflow-x-hidden">
            <article class="c-article">
                <div class="c-article__header  @if(!isset($update->images) || $update->images->isEmpty()) c-article__header--heading-only @endif ">

                    @if(isset($update->images) && $update->images->isNotEmpty() && $update->languageImages()->isNotEmpty())
                        <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="{{ str_replace('\\', '/', $update->languageImages()->first()->{$imageSize.'_image_url'}) }}">
                                @else
                                    <img src="{{ str_replace('\\', '/', $update->languageImages()->first()->{$imageSize.'_image_url'}) }}"
                                         alt="{{ (!empty($update->languageImages()->first()->name)) ? $update->languageImages()->first()->name : 'image' }}">
                                @endif
                            @endforeach
                        </picture>
                    @endif

                    <h1 class="c-article__heading">{{$update->translation->name}}</h1>

                </div>

                <div class="c-article__content">
{{--                    <div class="c-article__menu">--}}
{{--                        @include('site.components.optionsMenu', ['model' => $update, 'returnRoute' => $links->updates->route, 'optionsMenuText' => __('site/global.backToOverview')])--}}
{{--                    </div>--}}

                    <div class="c-article__components">
                        @include('site.organisms.components', ['layoutType' => 'article', 'componentTextScope' => 'c-article__text-scope'])
                    </div>

                    <a href="/{{ $links->updates->route }}" class="c-article__return-link">

                        <span class="c-article__return-link-icon">
                            @include('site.components.icons.flat-arrow')
                        </span>

                        <span class="c-article__return-link-text">
                            @lang('site/updates.backToProductUpdates')
                        </span>
                    </a>

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


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

{{--            <div class="l-grid o-block">--}}
{{--                <div>--}}
{{--                    @include('site.organisms.otherModels', ['resourceRoute' => '/' . $links->updates->route, 'otherModelTitle' => __('site/updates.otherModelsTitle')])--}}
{{--                </div>--}}
{{--            </div>--}}

{{--        @endif--}}


        <div class="l-grid  o-block-bg">
            <div>
                @include('site.components.cta.cta--bar')
            </div>
        </div>

    </div>

    @include('site.organisms.footer')

@endsection