<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 -->

                @foreach($staff as $key => $employee)

                    <div class="valign-parent @if($key == 'patty') active @endif ">
                        <span class="quote-holder valign-child">
                            <span class="quote">
                                {{ $employee['quote'] }}
                            </span>
                            <span class="name">
                                &mdash; {{ $employee['name'] }}
                            </span>
                        </span>
                    </div>

                @endforeach

                <!-- Images Slider -->

                <div class="swiper-wrapper">

                    @foreach($staff as $employee)

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

                    @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>

                @foreach($staff as $key => $employee)

                    <li @if($key == 'patty') class="active" @endif>
                        <span class="name">{{ $employee['name'] }}</span>
                        <span class="function">{{ $employee['function'] }}</span>
                    </li>

                @endforeach

            </ul>
        </div>

        <!-- Content -->

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

                @foreach($staff as $employee)

                    <div class="swiper-slide">
                        <div class="column wp33 person">
                            <span class="name">{{ $employee['name'] }}</span>
                            <span class="function">{{ $employee['function'] }}</span>
                        </div>
                        <div class="column wp44 story">
                            {{ $employee['story'] }}
                            
                            @if(isset($employee['registrationNumber']))
                                <p>{{ $employee['registrationNumber'] }}</p>
                            @endif
                        </div>
                    </div>

                @endforeach

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