@extends('layouts.master', ['view' => 'reference'])

@section('meta')
    <title>{{KommaLang::get('interviewWith')}} {{ $reference->name }} | {{ $page->translation->meta_title }}</title>
    <meta name="description" content="{{ $reference->translation->meta_description }}">

    @if(isset($reference->routeInOtherLanguages))
        @foreach($reference->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-streamer image-slider grid-col">

                    {{-- Streamer --}}
                    <div class="streamer">
                        <p>‘{{$reference->translation->streamer}}’</p>
                    </div>

                    {{-- Image --}}
                    @if($reference->images->count() != 0)

                        <figure>
                            @if(isset($reference->images->first()->large_image_url) && $reference->images->first()->large_image_url != '')
                            <img class="large" alt="{{$reference->name}}"
                                 src="{{$reference->images->first()->large_image_url}}"/>
                            @endif
                            <img class="medium @if(!(isset($reference->images->first()->large_image_url) && $reference->images->first()->large_image_url != '')) active @endif" alt="{{$reference->name}}"
                                 src="{{$reference->images->first()->medium_image_url}}"/>

                            <span>{{$reference->name}}</span>
                        </figure>
                    @endif

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

                </div>

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

                    {{-- 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>{{KommaLang::get('interviewWith')}} {{$reference->name}}</h1>
                        {{--<h1>{{ $post->translation->name }}</h1>--}}
                        {{--<span class="date">{{$post->getDate()->format('d')}} @lang('calender.months.'.$post->getDate()->format('n')) {{$post->getDate()->format('Y')}}</span>--}}
                        {{ $reference->translation->description }}


                        <?php
                        $nextInterview = $page->school->references()->orderBy('references.lft', 'desc')->where('references.lft', '<', $reference->lft)->where('references.id', '!=', $reference->id)->first();
                        ?>
                        @if(isset($nextInterview))
                            <a class="button" href="/{{
                        $nextInterview->translations()->first()->routes->filter(function($route) use ($page) {
                            if( starts_with($route->route, $page->translation->route->route)){
                                return $route->route;
                            }
                        })->first()->route;
                    }}">
                                {{KommaLang::get('interviewWith')}} {{$nextInterview->name}}
                            </a>
                        @endif

                    </div>

                    <div class="other-references">
                        <h2>{{KommaLang::get('otherInterviews')}}</h2>
                        <div class="references-placeholder">
                            @foreach($page->school->references()->with('translations','translations.routes', 'images')->orderBy('references.lft', 'asc')->where('references.id', '!=', $reference->id)->get()->take(8) as $key => $otherReference)
                                <a class="other-reference" href="/{{
                        $otherReference->translations->first()->routes->filter(function($route) use ($page) {
                            if( starts_with($route->route, $page->translation->route->route)){
                                return $route->route;
                            }
                        })->first()->route;
                    }}"
                                   @if($otherReference->images->count() != 0) style="background-image: url('{{$otherReference->images->first()->medium_image_url}}');" @endif>
                                    <p>
                                        {{--{{$otherReference->name}}--}}
                                    </p>
                                </a>
                            @endforeach
                        </div>
                    </div>

                    {{-- Relevant pages --}}
                    @include('layouts.partials.relevantPages')

                </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', $('.reference .image-and-streamer').height() + 200);

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