@extends('layouts.master')

@section('streamer')
    <div class="streamer">
        <span class="bold">Groot</span> of <span class="bold">klein</span>, elke tuin een juweeltje
    </div>
@endsection

@section('editable_content')

    <div class="top-background">
        <div class="wrap-container">
            <div class="block intro">
                @include('blocks/block', ['block'=>$blocks['contact_opnemen_foto']])
                <div class="block intro-text-about">
                    @include('blocks/block', ['block'=>$blocks['over_ons_intro']])
                    <a href="/contact" class="link">Contact opnemen</a>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom-background">
        <div class="wrap-container">
            <div class="swiper-container">
                <div class="features-title center">Onze Visie</div>
                <div class="swiper-wrapper">
                    @for($i = 1; $i < 4; $i++)
                        <div class="swiper-slide">
                            <div class="slide-content">
                                <?php $file_name = 'over_ons_visie_' . $i; ?>
                                @include('blocks/block', ['block'=>$blocks[$file_name]])
                            </div>
                        </div>
                    @endfor
                </div>

                <div class="swiper-button-next swiper-button-black"></div>
                <div class="swiper-button-prev swiper-button-black"></div>
                <div class="swiper-pagination swiper-pagination-black"></div>
            </div>
        </div>

        <div class="wrap-container">
            @include('blocks/block', ['block'=>$blocks['over_ons_footnote']])
        </div>
    </div>

@endsection

@section('extra-js')
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 8000,
            autoplayDisableOnInteraction: true
        });
    </script>
@endsection