<?php $__env->startSection('meta'); ?>
    <title><?php echo $page->translation->meta_title; ?></title>
    <meta name="description" content="<?php echo $page->translation->meta_description; ?>">
<?php $__env->stopSection(); ?>

<?php $__env->startSection('editable_content'); ?>
    <div class="image-wrapper">

        <div class="content-placeholder">


            <div class="grid-row">
                <div class="grid-col">
                    <?php echo $__env->make('layouts.partials.breadcrumb', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
                </div>
            </div>
            <div class="grid-row top">
                <?php /* Impression block */ ?>


                <?php /* Title content block */ ?>
                <div class="grid-col col-4 offset-1">
                    <h1><?php echo $page->translation->name; ?></h1>

                    <a href="/projecten" class="back-to-projects"><span class="icon-grid-view"></span> Terug naar
                        overzicht</a>
                </div>
                <div class="grid-col col-5 offset-1">
                    <p><?php echo $page->translation->sub_title; ?></p>
                </div>

            </div>
            <div class="grid-row main row">
                <div class="images grid-col col-7">
                    <?php for($i = 0; $i < 3; $i++): ?>
                        <?php if($i == 4): ?> break; <?php endif; ?>
                        <figure class="img-<?php echo $i; ?>" onclick="showSlider(<?php echo $i; ?>);">
                            <?php if(!empty($page->images[$i])): ?>
                                <span class="medium"
                                      style="background-image: url('<?php echo $page->images[$i]->medium_image_url; ?>');"></span>
                                <span class="large"
                                      style="background-image: url('<?php echo $page->images[$i]->large_image_url; ?>');"></span>
                            <?php endif; ?>
                        </figure>
                    <?php endfor; ?>
                    <?php echo $__env->make('layouts.svg.bigHexagon', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
                </div>
                <div class="description grid-col col-4 offset-1">
                    <h2>Beschrijving</h2>
                    <table>
                        <tr>
                            <td>Type dak:</td>
                            <td><?php echo $page->translation->roof_type; ?></td>
                        </tr>
                        <tr>
                            <td>Type project:</td>
                            <td><?php echo $page->project_category->name; ?></td>
                        </tr>
                        <tr>
                            <td>Oplevering:</td>
                            <td><?php echo $page->translation->construction_year; ?></td>
                        </tr>
                        <tr>
                            <td>Locatie:</td>
                            <td><?php echo $page->translation->location_string; ?></td>
                        </tr>
                    </table>
                    <?php if(!empty($page->translation->meta_description)): ?>
                        <p><b>Bijzonderheden:</b><br/><?php echo $page->translation->meta_description; ?></p>
                    <?php endif; ?>

                    <a href="/offerte-aanvragen" class="offerte-button button blue arrow">Offerte opvragen</a>
                </div>

            </div>

            <div class="grid-row bottom row">
                <div class="grid-col col-12 reference-linkholder">
                    <a href="/projecten">Overzicht projecten</a>
                    <br/>
                    <span class="yellowline"></span>
                </div>
            </div>

            <div class="grid-row nearby-projects full-row">
                <div class="grid-row">
                    <div class="grid-col col-14">
                        <h1>Projecten in de buurt van:</h1>
                        <h3><?php echo $page->translation->name; ?></h3>
                        <?php foreach($nearbyProjects as $item): ?>
                            <article id="<?php echo $item[0]->id; ?>"
                                     class="grid-col col-3 <?php if(!isset($item[0]->images) || $item[0]->images->count() == 0): ?> no-image <?php endif; ?>">
                                <a href="/<?php echo $item[0]->translation->route->route; ?>">
                                    <figure <?php if($item[0]->images->count() != 0): ?> style="background-image: url('<?php echo $item[0]->images->first()->medium_image_url; ?>');"<?php endif; ?>>
                                        <span class="overlay"></span>
                                    </figure>
                                </a>
                                <div class="content">
                                    <h4><?php echo $item[1]; ?></h4>

                                </div>
                            </article>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <div class="grid-row full-row">
                <?php /*<div class="home-referenties">*/ ?>
                <?php /*<div class="grid-row full-row">*/ ?>
                <?php /*<section class="grid-col references-text">*/ ?>
                <?php /*<h2><?php echo $homeBlock['referenceBlock']->description; ?></h2>*/ ?>
                <?php /*<a href="<?php echo $homeBlock['referenceBlock']->link; ?>"*/ ?>
                <?php /*class="button blue arrow"><?php echo $homeBlock['referenceBlock']->link_text; ?></a>*/ ?>
                <?php /*</section>*/ ?>
                <?php /*<section class="grid-col col-7 references-imgHolder">*/ ?>
                <?php /*<?php if(isset($homeBlock['referenceBlock']->images[0])): ?>*/ ?>
                <?php /*<img class="large" alt="impression image"*/ ?>
                <?php /*src="<?php echo $homeBlock['referenceBlock']->images[0]->large_image_url; ?>"/>*/ ?>
                <?php /*<img class="medium" alt="impression image" src="<?php echo $dynamicContent->images[0]->medium_image_url; ?>"/>*/ ?>
                <?php /*<?php endif; ?>*/ ?>
                <?php /*</section>*/ ?>
                <?php /*</div>*/ ?>
                <?php /*</div>*/ ?>
                <div class="home-referenties">
                    <div class="grid-row full-row">
                        <div class="grid-row">
                        <section class="grid-col references-text">
                            <h2>Benieuwd wat wij te bieden hebben?</h2>
                            <a href="/diensten" class="button blue arrow">Diensten</a>
                        </section>
                        <section class="grid-col col-7 references-imgHolder">
                            <?php if(isset($homeBlock['referenceBlock']->images[0])): ?>
                                <?php /*<img class="large" alt="impression image"*/ ?>
                                <?php /*src="<?php echo $homeBlocks['referenceBlock']->images[0]->large_image_url; ?>"/>*/ ?>
                                <?php /*<img class="medium" alt="impression image" src="<?php echo $dynamicContent->images[0]->medium_image_url; ?>"/>*/ ?>
                                <figure class="large"
                                        style="background-image: url('<?php echo $homeBlock['referenceBlock']->images[0]->large_image_url; ?>');">
                                </figure>
                            <?php endif; ?>
                        </section>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="image-slider">
            <div class="slider-bg"></div>

            <div class="image-holder">
                <span class="close-button">&times;</span>
                <?php if($page->images->count() != 0): ?>
                    <figure>
                        <?php foreach($page->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="large"
                                      style="background-image: url('<?php echo $image->large_image_url; ?>');"></span>
                            </div>
                        <?php endforeach; ?>
                    </figure>
                    <?php if($page->images->count() > 1): ?>
                        <div class="image-slider-nav">
                            <span class="previous nav-button" data-image="<?php echo sizeof($page->images)-1; ?>"><</span>
                            <span class="next nav-button" data-image="1">></span>
                        </div>
                    <?php endif; ?>
                <?php endif; ?>
            </div>

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

<?php $__env->startSection('extra-js'); ?>
    <script src="/js/jquery.touchSwipe.min.js"></script>
    <script src="/js/overviewSlider.js"></script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', ['view' => 'news-detail'], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>