@extends('layouts.master', ['view' => 'news-detail'])

@section('meta')
    <title>{{ $post->translation->name }} | {{ $page->translation->meta_title }}</title>
    <meta name="description" content="{{ $post->translation->meta_description }}">
    <meta name="robots" content="noindex,follow">

    @if(isset($post->routeInOtherLanguages))
        @foreach($post->routeInOtherLanguages as $routeInOtherLanguage)
            <link rel="alternate" hreflang="{{$routeInOtherLanguage->iso_2}}"
                  href="{{ \URL::to($routeInOtherLanguage->route->route) }}"/>
        @endforeach
    @endif

@endsection

@section('editable_content')

    <div class="image-wrapper">
        @include('layouts.partials.navigation')


        <div class="content-placeholder">

            {{-- Make extra block for the creative backgrounds in this design :p --}}
            <div class="background"></div>
            <div class="grey-block"></div>

            <div class="grid-row">
                <span class="right-icon styling"></span>


                {{-- Impression block --}}
                <div class="image-and-latest-news image-slider grid-col">

                    {{-- Image --}}
                    @if($post->images->count() != 0)
                        <figure>
                            @foreach($post->images as $key => $image)
                                <div data-image="{{$key}}" class="image @if($key == 0) active @endif">
                                    <span class="medium"
                                          style="background-image: url('{{$image->medium_image_url}}');"></span>
                                    <span class="large"
                                          style="background-image: url('{{$image->large_image_url}}');"></span>
                                </div>
                            @endforeach
                            @if($post->images->count() > 1)
                                <div class="image-slider-nav">
                                    <span class="previous nav-button" data-image="{{sizeof($post->images)-1}}"></span>
                                    <span class="next nav-button" data-image="1"></span>
                                </div>
                            @endif
                        </figure>
                    @endif

                    {{-- Latest newsitems --}}
                    <div class="latest-news-side-block">
                        <p>{{ KommaLang::get('latestNews') }}</p>

                        @include('layouts.partials.posts.listPosts', ['newsItems' => $page->school->news()->with('translations')->where('posts.lft', '!=' , '1')->where('date', '<=', \Carbon\Carbon::today())->orderBy('posts.date', 'desc')->get()->take(8)])

                        <a class="latest-news-footer" href="/{{$page->translation->route->route}}">
                            {{ KommaLang::get('showAllNews') }}
                        </a>
                    </div>

                    <span class="left-icon styling"></span>

                </div>

                {{-- Main content block --}}
                <div class="grid-col main">
                    <div class="main-placeholder">

                        {{-- Return link --}}
                        <div class="return-link">
                            <a href="/{{$page->translation->route->route}}">
                                {{ KommaLang::get('returnTo') }} ‘{{$page->translation->name}}’
                            </a>
                        </div>

                        {{-- Loaded content --}}
                        <div class="content">
                            <h1>{{ $post->translation->name }}</h1>
                            <span class="date">{{$post->getDate()->format('j')}} @lang('calender.months.'.$post->getDate()->format('n')) {{$post->getDate()->format('Y')}}</span>
                            {{ $post->translation->description }}
                        </div>

                    </div>

                    {{-- Next newsitems --}}
                    @include('layouts.partials.posts.nextNews', ['nextNewsItems' => $page->school->news()->with('translations', 'translations.routes', 'images')->orderBy('posts.date', 'desc')->where('posts.date', '<=', $post->date)->where('posts.id', '!=', $post->id)->where('date', '<=', \Carbon\Carbon::today())->where('posts.lft', '!=' , '1')->get()->take(2), 'previousNewsItems' => $page->school->news()->orderBy('posts.date', 'asc')->where('posts.date', '>=', $post->date)->where('posts.lft', '!=' , '1')->where('posts.id', '!=', $post->id)->where('date', '<=', \Carbon\Carbon::today())->get()->take(2)->sortBy('posts.date')])

                    <div class="main-placeholder">
                        {{-- Relevant pages --}}
                        @include('layouts.partials.relevantPages')
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra-js')
    <script src="/js/jquery.touchSwipe.min.js"></script>
    <script src="/js/overviewSlider.js"></script>
    <script>
        $(function () {

            resizeMyPage();

            $(window).resize(
                $.throttle( 100, resizeMyPage )
            );
        });

        function resizeMyPage() {
            // Main content must be at least 200px higher then the impression block
            $('.content-placeholder .main').css('min-height', $('.news-detail .image-and-latest-news').height() + 200);

            // Resizing for the grey block on (default)pages
            var greyHeight = $('.content-placeholder .main').height() -  $('.news-detail .image-and-latest-news').height() + $('.news-detail .image-and-latest-news .latest-news-side-block').height() - 100;
            var greyWidth = ($('.content-placeholder').width() -  $('.news-detail .content-placeholder>.grid-row').width()) / 2 + $('.news-detail .image-and-latest-news').width();
            $('.grey-block').height(greyHeight).width(greyWidth);
        }
    </script>
@endsection