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

    <?php echo $__env->make('layouts.partials.navigation', ['shadow' => true], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

    <div class="default-page-wrapper">

        <div class="grid-row default-page-content">

            <div class="content">

                <?php if(isset($page->content->main->typeName) && $page->content->main->typeName != ''): ?>
                    <h1><?php echo $page->content->main->typeName; ?></h1>
                <?php else: ?>
                    <h1><?php echo $page->translation->name; ?></h1>
                <?php endif; ?>

                <?php echo $page->content->main->description; ?>


                <?php if(isset($page->content->main->link) && $page->content->main->link != ''): ?>
                    <a class="button" href="<?php echo $page->content->main->link; ?>">
                        <?php echo $page->content->main->link_text; ?>

                        <span class="arrow"><?php echo $__env->make('svg.arrow', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></span>
                    </a>
                <?php endif; ?>
            </div>

            <div class="images">
                <?php if(sizeof($page->content->main->images) > 1): ?>
                    <div id="image-slider">
                        <div class="placeholder">
                            <?php foreach($page->content->main->images as $key => $imageSlide): ?>

                                <figure data-order="<?php echo $key; ?>" class="image-placeholder">

                                    <?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->content->main->images) - 1); ?>">
                                    <span><?php echo $__env->make('svg.arrow', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></span>
                                </div>

                                <div class="nav-item next" data-order="1">
                                    <span><?php echo $__env->make('svg.arrow', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></span>

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

                <?php elseif(sizeof($page->content->main->images) == 1): ?>
                    <picture>
                        <source media="(max-width: 840px)"
                                srcset="<?php echo $page->content->main->images[0]->medium_image_url; ?>">
                        <source media="(max-width: 1050px)"
                                srcset="<?php echo $page->content->main->images[0]->small_image_url; ?>">
                        <img src="<?php echo $page->content->main->images[0]->medium_image_url; ?>"
                             alt="image">
                    </picture>
                <?php endif; ?>

            </div>

        </div>

    </div>


    <?php echo $__env->yieldContent('additional-page-content'); ?>

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

<?php $__env->startSection('extra-js'); ?>
    <?php if(sizeof($page->content->main->images) > 1): ?>
        <script src="/js/slider.js"></script>
        <script>

            var imageSliderSetting = new SliderSetting({
                sliderId: 'image-slider',
                slideQuery: '#image-slider .placeholder figure',
                slideContentQuery: 'span',
                definedPreviousNext: true,
                navigationButtons: '#image-slider .placeholder .controllers .nav-item',
                sliderInterval: 500
            });
            imageSliderSetting = imageSliderSetting.prepareParameters();

            var imageSlider = new Slider(imageSliderSetting).init();

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

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