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

        <?php /* Header slider */ ?>
        <div class="image-slider grid-col col-6">

            <?php 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>
            <?php endif; ?>

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

            <?php 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>
            <?php endif; ?>

            <?php if ( ! ($page->code_name === 'academy')): ?>
                <figure>
                    <?php foreach($content->images as $key => $image): ?>
                        <div data-image="<?php echo $key; ?>" class="image <?php if($key == 0): ?> active <?php endif; ?>">
                            <span class="medium" style="background-image: url('<?php echo $image->medium_image_url; ?>');"></span>
                            <span class="small" style="background-image: url('<?php echo $image->small_image_url; ?>');"></span>
                        </div>
                    <?php endforeach; ?>
                    <?php if(sizeof($content->images) > 1): ?>
                        <div class="image-slider-nav">
                            <span class="previous nav-button" data-image="<?php echo sizeof($content->images)-1; ?>"></span>
                            <span class="next nav-button" data-image="1"></span>
                        </div>
                    <?php endif; ?>
                </figure>
            <?php endif; ?>




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

        </div>

        <?php /* Content */ ?>
        <div class="content grid-col col-5 offset-1">
            <h1><?php echo $content->typeName; ?></h1>
            <div class="text">

                <?php if($page->code_name === 'services'): ?>
                    <?php echo $page->content->translation->description['0']->description; ?>

                <?php else: ?>
                    <?php echo $content->description; ?>

                <?php endif; ?>
            </div>

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

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

        </div>

        <?php /* Styling Icon */ ?>
        <span class="icon styling"></span>
    </div>
</section>