@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->about_introduction))
                    <div class="base-content-block">

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

                    </div>

                    <div class="base-image-block">
                        @if($page->content->about_introduction->images->count() != 0)
                            <div class="base-image"
                                 style="background-image: url('{{$page->content->about_introduction->images->first()->large_image_url}}')"></div>
                        @endif
                    </div>
                @elseif(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()->large_image_url}}')"></div>
                        @endif
                    </div>
                @elseif(isset($page->content->lotuscircle_introduction))
                    <div class="base-content-block">

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

                    </div>

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

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

                    </div>

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

                        <h2>Voeg een blok toe met code_name 'about_introduction' of 'methods_introduction'</h2>
                        <p>Name + omschrijving + 1 afbeelding</p>

                    </div>

                    <div class="base-image-block">
                            <div class="base-image"
                                 style="background-image: url('/img/header_image_01.jpg')"></div>
                    </div>
                @endif

            </div>

            @if(isset($page->content->about_introduction))

                <div class="person-block-container">

                    @foreach($page->content as $person)
                        @unless($person->code_name == "about_introduction")

                            <div class="person-block">

                                <div class="person-image-container">
                                    @if($person->images->count() != 0)
                                        <div class="person-image"
                                             style="background-image: url('{{$person->images->first()->large_image_url}}')"></div>
                                    @endif
                                </div>

                                <div class="person-information">
                                    <h2>{{ $person->translation->name }}</h2>
                                    {{ $person->translation->description }}
                                </div>

                            </div>

                        @endunless
                    @endforeach
                </div>

            @endif

        </div>

    </div>

    {{--@if($page->code_name === 'mysteryActs')--}}

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

    {{--@endif--}}

    {{--<div class="slider-container">--}}
        {{--<div class="content-container">--}}
            {{--@if(isset($page->slider))--}}
                {{--@include('layouts.partials.slider')--}}
            {{--@endif--}}
        {{--</div>--}}
    {{--</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