<section class="panel aboutSwiper">

    <div class="images column wp100">

        <!-- Prev -->

        <div class="column w3 swiper-button swiper-button-prev green disabled">
            <div class="plane">
                <span class="arrow"></span>
            </div>
        </div>

        <!-- Images -->

        <div class="column w6 swiper-image-holder">
            <div class="swiper-container swiper-images swiper-container-visible">

                <!-- Quotes -->

                <?php foreach($staff as $key => $employee): ?>

                    <div class="valign-parent <?php if($key == 'patty'): ?> active <?php endif; ?> ">
                        <span class="quote-holder valign-child">
                            <span class="quote">
                                <?php echo $employee['quote']; ?>

                            </span>
                            <span class="name">
                                &mdash; <?php echo $employee['name']; ?>

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

                <?php endforeach; ?>

                <!-- Images Slider -->

                <div class="swiper-wrapper">

                    <?php foreach($staff as $employee): ?>

                        <div class="swiper-slide">
                            <img src="<?php echo $employee['image']; ?>" alt="<?php echo $employee['name']; ?> - <?php echo $employee['function']; ?>" class="fill preload" data-origin="top right"/>
                        </div>

                    <?php endforeach; ?>

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

        <!-- Next -->

        <div class="column w3 swiper-button swiper-button-next blue">
            <div class="plane">
                <span class="arrow"></span>
            </div>
        </div>
    </div>
    <div class="clear"></div>

    <!-- Navigation -->

    <div class="panel">
        <div class="column w3 navigation">
            <span class="title">
                Team Tandarts Maas
            </span>
            <ul>

                <?php foreach($staff as $key => $employee): ?>

                    <li <?php if($key == 'patty'): ?> class="active" <?php endif; ?>>
                        <span class="name"><?php echo $employee['name']; ?></span>
                        <span class="function"><?php echo $employee['function']; ?></span>
                    </li>

                <?php endforeach; ?>

            </ul>
        </div>

        <!-- Content -->

        <div class="swiper-container swiper-info swiper-no-swiping">
            <div class="swiper-wrapper">

                <?php foreach($staff as $employee): ?>

                    <div class="swiper-slide">
                        <div class="column wp33 person">
                            <span class="name"><?php echo $employee['name']; ?></span>
                            <span class="function"><?php echo $employee['function']; ?></span>
                        </div>
                        <div class="column wp44 story">
                            <?php echo $employee['story']; ?>

                            
                            <?php if(isset($employee['registrationNumber'])): ?>
                                <p><?php echo $employee['registrationNumber']; ?></p>
                            <?php endif; ?>
                        </div>
                    </div>

                <?php endforeach; ?>

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