<?php $__env->startSection('editable_content'); ?>

    <?php /* If Image is added in KMS (home_slogan) it will show up as hero image */ ?>
    <section class="hero-image streamer"
             <?php if(isset($page->content->home_slogan) && $page->content->home_slogan->images->count() != 0): ?> style="background-image: url('<?php echo $page->content->home_slogan->images->first()->large_image_url; ?>');" <?php endif; ?>>
        <div class="placeholder">
            <div class="grid-row">
                <?php if(isset($page->content->home_slogan)): ?>
                    <?php echo $page->content->home_slogan->translation->description; ?>

                <?php else: ?>
                    <h1>Voeg een tekstblok toe met<br/>code_name 'home_slogan'</h1>
                    <p>Titel + Omschrijving + 1 afbeelding. In de titel kan eventueel &lt;br/&gt; gezet<br/>worden om
                        een enter te maken.
                    </p>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <section class="intro">
        <?php echo $__env->make('layouts.partials.introRow', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    </section>

    <section class="home-video-news">
        <div class="grid-row">
            <div class="video">
                <?php if(isset($page->content->home_video)): ?>
                    <?php echo $page->content->home_video->translation->description; ?>


                    <div class="dynamic-block video-block" id="player">
                        <div class="video-wrapper">
                            <div class="video-overlay"
                                 <?php if($page->content->home_video->images->count() == 0): ?>
                                 style="background-image: url('https://img.youtube.com/vi/<?php echo $page->content->home_video->translation->name; ?>/hqdefault.jpg');"
                                 <?php else: ?>
                                 style="background-image: url('<?php echo $page->content->home_video->images->first()->large_image_url; ?>');"
                                    <?php endif; ?>
                            >
                                <div class="button">
                                    <img alt="youtube-play-buton" src="/img/youtubeButton.svg"/>
                                </div>
                            </div>
                            <div id="ytplayer"></div>
                        </div>
                    </div>

                <?php endif; ?>
            </div>
            <div class="latest-news">
                <h2>Laatste nieuws</h2>
                <?php if($posts->count() == 0): ?>
                    <p>Geen nieuws beschikbaar</p>
                <?php else: ?>
                    <div class="post">
                        <?php echo $posts->first()->translation->meta_description; ?>

                    </div>
                    <div class="buttons">
                        <a href="/<?php echo $posts->first()->translation->route->route; ?>">
                            Lees meer <img id="contact-icon" class="svg" src="/img/icons/arrow_right_icon_blue.svg"/>
                        </a>
                        <a class="news-link" href="/<?php echo $links->news->route; ?>">
                            Alle nieuwsberichten <img id="contact-icon" class="svg"
                                                      src="/img/icons/arrow_right_icon_blue.svg"/>
                        </a>
                    </div>
                    <?php /*<?php echo dde($posts->first()); ?>*/ ?>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <section class="home-reference">
        <div class="grid-row">
            <?php if(isset($page->content->home_reference)): ?>
                <div class="references-block">
                    <div class="reference">
                        <div class="reference-title">
                            <h3><?php echo $page->content->home_reference->translation->name; ?></h3>
                        </div>
                        <div class="reference-body">
                            <p><?php echo $page->content->home_reference->translation->description; ?></p>
                        </div>
                    </div>
                    <a class="reference-link" href="/<?php echo $links->references->route; ?>">
                        Lees alle referenties <img id="contact-icon" class="svg"
                                                   src="/img/icons/arrow_right_icon_blue.svg"/>
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </section>

    <section class="discover">
        <?php echo $__env->make('layouts.partials.discoverRow', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    </section>

    <section class="cta">
        <?php echo $__env->make('layouts.partials.cta', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    </section>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('extra-js'); ?>

    <?php if(isset($page->content->home_video)): ?>

        <script>
            // Load the IFrame Player API code asynchronously.
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/player_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            // Replace the 'ytplayer' element with an <iframe> and
            // YouTube player after the API code downloads.

            var player = null;

            function loadYoutubePlayer() {
                player = new YT.Player(('ytplayer'), {
                    height: '360',
                    width: '640',
                    videoId: '<?php echo $page->content->home_video->translation->name; ?>',
                    host: 'https://www.youtube-nocookie.com',
                    playerVars: {
                        modestbranding: 1,
                        showinfo: 0,
                        rel: 0,
                    },
                    events: {
                        'onReady': onPlayerReady,
                    }
                });
            }


            document.querySelector('#player .video-overlay').addEventListener('click', function () {
                if (player === null) {
                    loadYoutubePlayer();
                }

                this.classList.add('hide');

            }, false);


            function onPlayerReady(event) {
                event.target.playVideo();
            }
        </script>

    <?php endif; ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>