<section class="overview-header">
    <div class="grid-row has-video">


        <div class="youtube-video u-hide-on-desktop">
            <iframe
                    src="https://www.youtube-nocookie.com/embed/i9VuW57Mso0?controls=0"
                    title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
            </iframe>
        </div>

        {{-- Header slider --}}
        <div class="image-slider grid-col col-6">

            @if($page->code_name === 'academy')
                <div class="youtube-video">
                    <iframe
                            src="https://www.youtube-nocookie.com/embed/i9VuW57Mso0?controls=0"
                            title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen>
                    </iframe>
                </div>
            @endif

            {{--            @if($page->code_name === 'services')--}}
            {{--                <div class="youtube-video">--}}
            {{--                    <iframe--}}
            {{--                        src="https://www.youtube-nocookie.com/embed/C0BbCPGrJjs?controls=0"--}}
            {{--                        title="YouTube video player"--}}
            {{--                        frameborder="0"--}}
            {{--                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"--}}
            {{--                        allowfullscreen>--}}
            {{--                    </iframe>--}}
            {{--                </div>--}}
            {{--            @endif--}}

            @if($page->code_name === 'services')
                <figure>
                    <div data-image="0" class="image active">
                        <span class="medium" style="background-image: url('/img/ozapp-arrangementen-foto.jpg');"></span>
                        <span class="small" style="background-image: url('//img/ozapp-arrangementen-foto.jpg');"></span>
                    </div>
                </figure>
            @endif

            @unless($page->code_name === 'academy')
                <figure>
                    @foreach($content->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="small" style="background-image: url('{{$image->small_image_url}}');"></span>
                        </div>
                    @endforeach
                    @if(sizeof($content->images) > 1)
                        <div class="image-slider-nav">
                            <span class="previous nav-button" data-image="{{sizeof($content->images)-1}}"></span>
                            <span class="next nav-button" data-image="1"></span>
                        </div>
                    @endif
                </figure>
            @endunless




            @unless(in_array($page->root->code_name, ['services','jobs','foundation','academy']))
                {{-- New at Zuiderbos --}}
                <aside class="new-at-zuiderbos grid-col col-6 offset-4 col-md-8 offset-md-2">
                    <p>{{ KommaLang::get('moreAboutZuiderbos') }}</p>
                    <ul>
                        <li>
                            <a href="/{{$links->{$page->school->type.'-future-student-interview'}->route}}">{{KommaLang::get('moreAboutFirst')}}</a>
                        </li>
                        <li>
                            @if(starts_with($page->school->type, 'vso'))
                                <a href="/{{$links->{$page->school->type.'-college-foundation'}->route}}">{{KommaLang::get('moreAboutSecond')}}</a>
                            @else
                                <a href="/{{$links->{$page->school->type.'-school-foundation'}->route}}">{{KommaLang::get('moreAboutSecond')}}</a>
                            @endif
                        </li>
                    </ul>
                    <a href="/{{$links->{$page->school->type.'-parents-steps'}->route}}">
                        Aanmelden
                    </a>
                </aside>
            @endunless

        </div>

        {{-- Content --}}
        <div class="content grid-col col-5 offset-1">
            <h1>{{$content->typeName}}</h1>
            <div class="text">

                @if($page->code_name === 'services')
                    {{$page->content->translation->description['0']->description}}
                @else
                    {{$content->description}}
                @endif
            </div>

            {{--            @if($page->code_name === 'academy')--}}
            {{--                <div class="youtube-video">--}}
            {{--                    <iframe--}}
            {{--                            src="https://www.youtube-nocookie.com/embed/8ohFxhKnTJY?controls=0"--}}
            {{--                            title="YouTube video player"--}}
            {{--                            frameborder="0"--}}
            {{--                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"--}}
            {{--                            allowfullscreen>--}}
            {{--                    </iframe>--}}
            {{--                </div>--}}
            {{--            @endif--}}

            {{--            @if($page->code_name === 'services')--}}
            {{--                <div class="youtube-video">--}}
            {{--                    <iframe--}}
            {{--                            src="https://www.youtube-nocookie.com/embed/C0BbCPGrJjs?controls=0"--}}
            {{--                            title="YouTube video player"--}}
            {{--                            frameborder="0"--}}
            {{--                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"--}}
            {{--                            allowfullscreen>--}}
            {{--                    </iframe>--}}
            {{--                </div>--}}
            {{--            @endif--}}

        </div>

        {{-- Styling Icon --}}
        <span class="icon styling"></span>
    </div>
</section>