@extends('layouts.master')

@section('streamer')
    <div class="streamer">
        <span class="bold">Een sfeervolle tuin</span><br />in alle seizoenen mooi
    </div>
@endsection

@section('editable_content')

    <div class="top-background">
        <div class="wrap-container">
            <div class="block intro">
                <div class="block intro-text-method">
                    @include('blocks/block', ['block'=>$blocks['werkwijze_intro']])
                    <a href="/projecten" class="link">Bekijk onze projecten</a>
                </div>
                @include('blocks/block', ['block'=>$blocks['contact_opnemen_foto']])
            </div>
        </div>
    </div>

    <div class="bottom-background">
        <div class="wrap-container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @for($i = 1; $i < 10; $i++)
                        <div class="swiper-slide">
                            <div class="slide-content">
                                <div class="features-title center">Stap {{ $i }}</div>
                                    <div class="block-slider">
                                        <?php $file_name = 'werkwijze_stap_' . $i; ?>
                                        @include('blocks/block', ['block'=>$blocks[$file_name]])
                                    </div>
                            </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>

@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