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

@section('editable_content')

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

        @if(isset($page->content))
            <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 @if($page->content->images->count() == 0) extra-margin-top @endif"></span>


                    {{-- Impression block --}}
                    <div class="page-impression grid-col">

                        {{-- Quote --}}
                        <div class="quote">
                            <p>‘{{$page->content->translation->name}}’</p>
                        </div>

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

                            @if(ends_with($page->code_name, 'future-student-outflow') || $page->code_name == 'foundation-organisation')
                                <a href="{{$page->content->images->first()->large_image_url}}" data-lightbox="image-slider">
                                    @endif

                                    <img class="medium" alt="{{$page->translation->name}}"
                                         src="{{$page->content->images->first()->medium_image_url}}"/>
                                    <img class="large" alt="{{$page->translation->name}}"
                                         src="{{$page->content->images->first()->large_image_url}}"/>

                                    @if(ends_with($page->code_name, 'future-student-outflow') || $page->code_name == 'foundation-organisation')
                                </a>
                            @endif

                        @endif

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

                    </div>

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

                        {{-- Return link --}}
                        <div class="return-link">
                            <?php
                                $pageParent = $page->getParent();
                            $pageParentCodeName = $pageParent->code_name;
                            if (Illuminate\Support\Str::endsWith($pageParentCodeName, '-actual')) {
                                $pageParentCodeName .= '-news';
                            }
                            ?>
                            <a href="/{{$links->{$pageParentCodeName}->route}}">
                                {{ KommaLang::get('returnTo') }} ‘{{$links->{$pageParentCodeName}->name}}’
                            </a>
                        </div>

                        {{-- Loaded content --}}
                        <div class="content">
                            {{ $page->content->translation->description['content']->description }}

                            @if(ends_with($page->code_name, '-documentation') && $page->code_name != 'foundation-documentation')
                                @include('layouts.partials.documents.schoolDocuments')
                            @elseif($page->code_name == 'foundation-documentation')
                                @include('layouts.partials.foundation.documents')
                            @endif

                        </div>

                        {{-- Contact button --}}
                        @if(isset($page->content->translation->description['content']->link) && $page->content->translation->description['content']->link != '')
                            <a class="button" href="{{$page->content->translation->description['content']->link}}">
                                {{$page->content->translation->description['content']->link_text}}
                            </a>
                        @endif

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

                    </div>
                </div>
            </div>
        @else
            <p>{{$page->code_name}}</p>
        @endif

        @include('layouts.partials.academy.service-cta')


    </div>

@endsection

@section('extra-js')

    @if(ends_with($page->code_name, 'future-student-outflow') || $page->code_name == 'foundation-organisation')
        <script src="/packages/lightbox/js/lightbox.min.js"></script>
        <link rel="stylesheet" href="/packages/lightbox/css/lightbox.min.css"/>
    @endif
    <script>
        $(function () {

            @if(ends_with($page->code_name, 'future-student-outflow') || $page->code_name == 'foundation-organisation')
                lightbox.option({
                'resizeDuration': 400,
                'albumLabel': 'Afbeelding %1 van de %2',
                'disableScrolling': true,
            });
            @endif

            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', $('.page .page-impression').height() + 200);

            // Resizing for the grey block on (default)pages
            var greyHeight = $('.content-placeholder .main').height() - $('.page .page-impression').height() + 100;
            var greyWidth = ($('.content-placeholder').width() - $('.page .content-placeholder>.grid-row').width()) / 2 + $('.page .page-impression').width();
            $('.grey-block').height(greyHeight).width(greyWidth);
        }
    </script>

@endsection