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

    <div class="ajax-container our-studio-detail" id="<?php echo $page->code_name; ?>" data-color-type="<?php echo $page->colorType; ?>">

        <nav class="sub-menu">
            <ul>
                <?php foreach($page->siblings as $serviceMenuItem): ?>
                    <li class=" <?php if($serviceMenuItem->code_name == $page->code_name): ?> active <?php endif; ?> ">
                        <a data-pjax data-code-name="ourStudio" href="/<?php echo $links->{$serviceMenuItem->code_name}->route; ?>">
                            <?php /*<?php echo $links->{$serviceMenuItem->code_name}->name; ?>*/ ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </nav>

        <div class="title">
            <div class="pre-title loaded-animation">
                <a data-pjax data-code-name="ourStudio" href="/<?php echo $links->ourStudio->route; ?>"><?php echo $links->ourStudio->name; ?></a>
                <p><?php echo $page->letter; ?><?php echo KommaLang::get('discover'); ?></p>
            </div>
            <div class="main-title loaded-animation">
                <h1>
                    <?php echo $page->translation->name; ?>

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

        <?php /*<a class="backToOverview" href="/<?php echo $links->ourStudio->route; ?>"><?php echo \Illuminate\Support\Facades\Lang::get('translations.backToOverview'); ?></a>*/ ?>

        <section class="content our-studio-block loaded-animation">

            <?php if($page->content->translation->description != '[]'): ?>
                <?php echo $__env->make('layouts.partials.dynamic.dynamicBlocks', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
            <?php endif; ?>

        </section>
        <section class="image animation-part our-studio-block <?php echo $page->code_name; ?>"
                 style="background-image: url('/img/<?php echo $page->code_name; ?>.jpg');">
            <div class="shape ">
                <?php if(in_array($page->code_name, ['creativity'])): ?>
                    <?php echo $__env->make('layouts.svg.triangle', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
                <?php elseif(in_array($page->code_name, ['ourFactory'])): ?>
                    <?php echo $__env->make('layouts.svg.square', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
                <?php elseif(in_array($page->code_name, ['ourTeam'])): ?>
                    <?php echo $__env->make('layouts.svg.hexagon', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
                <?php endif; ?>
            </div>

            <div class="placeholder">
                <?php /*<a href="">*/ ?>
                <span class="youtube-play">
                    <img alt="youtube-play-button" src="/img/youtubeButton.svg"/>
                </span>

                <?php /*</a>*/ ?>
            </div>
        </section>

        <a data-pjax data-code-name="ourStudio" class="next-studio-item" href="/<?php echo $links->{$page->next->code_name}->route; ?>">
            <p><?php echo $links->{$page->next->code_name}->name; ?></p>
            <span></span>
        </a>


        <section class="video-pop-up">
            <div id="ytplayer"></div>
        </section>

        <span class="close-button">
            <div class="left-corner corner"><?php echo $__env->make('layouts.svg.corner', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></div>
            <div class="right-corner corner"><?php echo $__env->make('layouts.svg.corner', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></div>
            x
        </span>


        <script>

            function onYouTubePlayerAPIReady() {
                player = new YT.Player('ytplayer', {
                    height: '360',
                    width: '640',
                    videoId: '<?php echo \Config::get('business.video_'.$page->code_name); ?>',
                    playerVars: {
                        modestbranding: 0,
                        showinfo: 0,
                        rel: 0,
                        disablekb: 1
                    },
                    events: {
                        'onStateChange': onPlayerStateChange,
                    }
                });
            }

            if(document.querySelector('.our-studio-detail') != null ){

                document.querySelector('.our-studio-detail .image').addEventListener('click', function () {
                    document.querySelector('.our-studio-detail .video-pop-up').classList.add('active');
                    document.querySelector('body').classList.add('inProjects');
                    document.querySelector('.our-studio-detail .close-button').classList.add('show');
                    document.querySelector('.our-studio-block.content').classList.add('in-active');
                    document.querySelector('.our-studio-block.image').classList.add('in-active');
                    player.playVideo();
                }, false);

                document.querySelector('.our-studio-detail .close-button').addEventListener('click', function () {
                    closeVideo();
                    player.pauseVideo();
                }, false);

                document.querySelector('.our-studio-detail .video-pop-up').addEventListener('click', function () {
                    if (event.target.tagName == 'SECTION') {
                        closeVideo();
                        player.pauseVideo();
                    }
                }, false);

                document.querySelector('.our-studio-detail').addEventListener('click', function () {
                    if (event.target.tagName == 'BODY' || event.target.tagName == 'ASIDE') {
                        closeVideo();
                        player.pauseVideo();
                    }
                }, false);

            }

            function onPlayerStateChange(state) {

                if (state.data === YT.PlayerState.ENDED) {
                    closeVideo();
                }
            }

            function closeVideo() {
                document.querySelector('.our-studio-detail .video-pop-up').classList.remove('active');
                document.querySelector('body').classList.remove('inProjects');
                document.querySelector('.our-studio-detail .close-button').classList.remove('show');
                document.querySelector('.our-studio-block.content').classList.remove('in-active');
                document.querySelector('.our-studio-block.image').classList.remove('in-active');
            }

        </script>

    </div>

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

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