@extends('layouts.base', ['view' => 'error-page'])
@section('meta')
    <title>{{$error}}</title>
    <meta name="description" content="{{ $errorMessage }}">
@endsection

@section('content')

    <div class="image-wrapper">

        <header>
            <div class="grid-row">

                {{-- Logo --}}

                <figure class="grid-col col-2 offset-1 logo">
                    <a href="/">
                        <span></span>

                        <p>
                        </p>
                    </a>

                    {{-- Link to landings page --}}
                    <a class="root-link" href="/">
                        {{ KommaLang::get('backToRoot') }}
                    </a>
                </figure>

                {{-- Navigatie --}}

                <nav class="grid-col col-8">

                    {{-- Office 365 login --}}

                    <div class="office">
                        <a href="{{\Config::get('business.officeLink')}}" target="_blank">{{ KommaLang::get('officeLink') }}</a>
                    </div>
                </nav>
            </div>
        </header>



        <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="page-impression grid-col">

                    {{-- Quote --}}
                    <div class="quote">
                        <p>‘{{ KommaLang::get('errorQuote') }}’</p>
                    </div>

                    {{-- Image --}}
                    <img alt="error pagina image"
                         src="/img/zuiderbos-header.jpg"/>

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

                </div>

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


                    {{-- Loaded content --}}
                    <div class="content">
                        <h1>{{$errorHeader}}</h1>
                        <h2>{{ $errorStreamer }}</h2>
                        <p>{{ $errorMessage }}</p>

                        <div class="buttons">
                            <a href="/" class="button home">
                                Home
                            </a>
                            <a href="/sitemap" class="button sitemap">
                                Sitemap
                            </a>
                        </div>
                    </div>


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

    </div>

    @include('layouts.partials.landingspage.footer')

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

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

@endsection