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

@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">

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

                        {{-- Calender --}}
                        <section class="calender grid-col">

                            <a href="/{{$links->{$page->root->code_name.'-actual-calender'}->route }}">

                                {{-- Calender Header --}}
                                <h3>{{ KommaLang::get('home_agenda_title') }}</h3>

                                {{-- Load calender list --}}
                                @include('layouts.partials.calender.list', ['calenderItems' => $page->school->calenderItems()->with('translation')->orderBy('calender.date', 'asc')->where('active', 1)->where('calender.date', '>=', \Carbon\Carbon::today())->get()])

                                {{-- Calender Link / Footer --}}
                                <div class="link-block">
                                    <span>
                                        {{ KommaLang::get('full_agenda') }}
                                    </span>
                                </div>
                            </a>
                        </section>

                        {{-- Vacation planning link --}}
{{--                        <div class="vacation-link">--}}
{{--                            <a href="/{{$links->{$page->root->code_name.'-actual-vacation'}->route }}">--}}
{{--                                <p>{{ KommaLang::get('showVacationPlanning') }}</p>--}}
{{--                                <span>{{ KommaLang::get('readMore') }}</span>--}}
{{--                            </a>--}}
{{--                        </div>--}}

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

                    </div>

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

                        <div class="main-placeholder">

                            {{-- Load news and seperate first newsitem --}}
                            @include('layouts.partials.posts.index', ['news' => $news])


                            {{-- Relevant pages --}}
{{--                            @include('layouts.partials.relevantPages', ['findChildren' => true])--}}
                        </div>
                    </div>
                </div>
            </div>

    </div>


@endsection

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

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

@endsection