<?php

$this->template('/public/placeholder/top-bar.php');

$this->template('/public/placeholder/banner.php');



$navs     = array();

$titres   = array();

$pictures = array();

$contents = array();

$bottoms  = array();





    while($this->block("services")->loop()){

        if($this->editmode) {

            echo $this->input('nav');

            echo $this->image('picture');

            echo $this->wysiwyg('titre',   ['toolbarGroups' => [["name" => "clipboard", "groups" => ['clipboard', 'undo', 'cleanup']]]]);

            echo $this->wysiwyg('content', ['toolbarGroups' => [["name" => "clipboard", "groups" => ['clipboard', 'undo', 'cleanup']]]]);

            echo $this->wysiwyg('bottom',  ['toolbarGroups' => [["name" => "clipboard", "groups" => ['clipboard', 'undo', 'cleanup']]]]);

        }else{

            array_push($navs,$this->input('nav'));

            array_push($pictures,$this->image('picture'));

            array_push($titres,$this->wysiwyg('titre'));

            array_push($contents,$this->wysiwyg('content'));

            array_push($bottoms,$this->wysiwyg('bottom'));

        }

    }





    if (! $this->editmode){ ?>



        <div id="services" class="container">



            <ul class="services-nav">

                <?php for($i=0; $i<count($navs);$i++){ ?>

                    <li data-target="service_<?=$i?>" class="services-li"><span class="v-allign"></span><span><?= $navs[$i] ?></span></li>

                <?php } ?>

            </ul>



            <div class="services">

                <?php for($i=0; $i<count($navs);$i++){ ?>

                    <div class="service <?php if($i == 0) echo 'active' ?>" id="service_<?=$i?>">

                        <div class="image"><?= $pictures[$i] ?></div>

                        <div class="title"><?= $titres[$i] ?></div>

                        <span class="spacer"></span>

                        <div class="contenu"><?= $contents[$i] ?></div>

                        <div class="bottom"><?= $bottoms[$i] ?></div>

                    </div>

                <?php } ?>

            </div>



        </div>



        <script>

            $('.services-li').click(function(){

                var target = $(this).attr('data-target');

                $('.service.active').removeClass('active');

                $('#' + target).addClass('active');

            });

        </script>







    <?php } ?>















