<section class="ouddorp-row">

    <div class="grid-row">
        <div class="grid-col content">
            <h2><?php echo $page->translation->home_ouddorp->typeName; ?> <span class="icon"><?php echo $__env->make('svg.surrounding', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></span></h2>

            <?php echo $page->translation->home_ouddorp->description; ?>


            <a class="button" href="<?php echo $page->translation->home_ouddorp->link; ?>">
                <?php echo $page->translation->home_ouddorp->link_text; ?>

            </a>
        </div>

        <div class="grid-col image-slider" id="ouddorp-slider">
            <div class="placeholder">

                <?php foreach($page->translation->home_ouddorp->images as $key => $imageSlide): ?>

                    <figure data-order="<?php echo $key; ?>" class="image-placeholder  <?php if($key == 0): ?> active <?php endif; ?> ">

                        <?php foreach(['large', 'medium', 'small'] as $imageSize): ?>
                            <span class="<?php echo $imageSize; ?>"
                                  style="background-image: url('<?php echo $imageSlide->{$imageSize.'_image_url'}; ?>');"></span>
                        <?php endforeach; ?>

                    </figure>

                <?php endforeach; ?>

                <div class="controllers">
                    <div class="nav-item previous"
                         data-order="<?php echo (sizeof($page->translation->home_ouddorp->images) - 1); ?>">
                        <span></span>
                    </div>

                    <div class="nav-item next" data-order="1">
                        <span></span>

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

</section>