@extends('layouts.master')

@section('editable_content')

    <div class="header-background">

        <div class="content-container">

            @include('layouts.partials.contactPerson')

            <div class="base-breadcrumb">
                @include('layouts.partials.breadcrumb')
            </div>

            <div class="base-intro-block">
                @if(isset($page->content->methods_introduction))
                    <div class="base-content-block">

                        <h2>{{$page->content->methods_introduction->translation->name}}</h2>
                        {{ $page->content->methods_introduction->translation->description }}

                    </div>

                    <div class="base-image-block">
                        @if($page->content->methods_introduction->images->count() != 0)
                            <div class="base-image"
                                 style="background-image: url('{{$page->content->methods_introduction->images->first()->medium_image_url}}')"></div>
                        @endif
                    </div>
                @endif
            </div>


            @if($page->code_name != 'methods')

                @for($i = 0; $i <= 10; $i++)
                    @if(isset($page->content->{$page->code_name.'_step_'.$i}))
                        <div class="base-intro-block {{$i}}">

                            @if($i % 2 != 0)
                                <div class="base-image-block">
                                    @if($page->content->{$page->code_name.'_step_'.$i}->images->count() != 0)
                                        <div class="base-image"
                                             style="background-image: url('{{$page->content->{$page->code_name.'_step_'.$i}->images->first()->medium_image_url}}')"></div>
                                    @endif
                                </div>
                            @endif


                            <div class="base-content-block">
                                <h2>{{$page->content->{$page->code_name.'_step_'.$i}->translation->name}}</h2>
                                {{ $page->content->{$page->code_name.'_step_'.$i}->translation->description }}
                            </div>

                            @if($i % 2 == 0)
                                <div class="base-image-block">
                                    @if($page->content->{$page->code_name.'_step_'.$i}->images->count() != 0)
                                        <div class="base-image"
                                             style="background-image: url('{{$page->content->{$page->code_name.'_step_'.$i}->images->first()->medium_image_url}}')"></div>
                                    @endif
                                </div>
                            @endif

                        </div>
                    @endif

                @endfor

                    <div class="post-back-button button-linking" data-href="/{{$links->methods->route}}">
                        Terug naar werkwijze
                    </div>

            @endif

        </div>

    </div>

    <div class="content-container">
        @if(isset($page->slider))
            @include('layouts.partials.slider')
        @endif
    </div>

    @include('layouts.partials.cta')

@endsection

@section('extra-js')
    <script type="text/javascript" src="/js/jquery.touchSwipe.min.js"></script>
    <script type="text/javascript" src="/js/slider.js"></script>
@endsection