@extends('layouts.master')

@section('reasons-side-content')

    @if(isset($page->content->reasons_row))
        @if($page->content->reasons_row->typeSlug == 'video-block')
            @include('layouts.partials.home.videoBlock', ['block' => $page->content->reasons_row])
        @elseif($page->content->reasons_row->typeSlug == 'full-text-block')
            <div class="full-text content">
                <h4>{{ $page->content->reasons_row->typeName }}</h4>
                {{$page->content->reasons_row->description}}
            </div>
        @elseif($page->content->reasons_row->typeSlug == 'view-block')
            @include('layouts.partials.home.'.$page->content->reasons_row->view, ['title' => $page->content->reasons_row->typeName])
        @elseif($page->content->reasons_row->typeSlug == 'content-block' && 'image-slider')
            @include('layouts.partials.home.'.$page->content->reasons_row->view)
        @else
            {{ debug($page->content->reasons_row) }}
        @endif
    @else
        <p>Voeg een van de volgende dynamic blok met code_name 'reasons_row' toe:<br/>
            'Video'<br/>
            'Tekstkolom'<br/>
            'Video Block'<br/>
            'View' - met view 'news'
        </p>
    @endif
@endsection

@section('editable_content')

    @include('layouts.partials.navigation')

    <div class="header-image-wrapper">

        <div class="grid-row">

            <figure class="header-image">

                <picture>
                    <source media="(max-width: 470px)"
                            srcset="/img/home/home-450.jpg">
                    <source media="(max-width: 620px)"
                            srcset="/img/home/home-600.jpg">
                    <source media="(max-width: 875px)"
                            srcset="/img/home/home@0,5x.jpg">
                    <source media="(max-width: 1300px)"
                            srcset="/img/home/home@0,75x.jpg">
                    <img src="/img/home/home.jpg"
                         alt="impression">
                </picture>

                {{--<figcaption>--}}
                    {{--<span>--}}
                        {{--{{ KommaLang::get('headerQuote') }}--}}
                    {{--</span>--}}
                {{--</figcaption>--}}


            </figure>

            <a class="show-scroll internalLink" href="#reasons">
                    <span class="arrow">
                        @include('svg.arrow')
                    </span>
            </a>

        </div>

    </div>


    <div class="home-content-wrapper">

        <div class="grid-row">

            <div class="home-content">
                <div class="title-placeholder">
                    <p>{{KommaLang::get('preTitle')}}</p>
                    <h1>{{ $page->content->main->typeName }}</h1>
                    <a class="button" href="{{$page->content->main->link}}">
                        {{$page->content->main->link_text}}
                        <span class="arrow">@include('svg.arrow')</span>
                    </a>
                </div>

                <div class="content">
                    {{ $page->content->main->description }}
                </div>
            </div>

        </div>

    </div>

    @include('layouts.partials.home.reasonsRow', ['amountOfReasons' => 5])

    @include('layouts.partials.home.discoverRow')


@endsection

@section('extra-js')
    @if($page->content->reasons_row->typeSlug == 'content-block' && 'image-slider')
        <script src="/js/slider.js"></script>
        <script>

            var imageSliderSetting = new SliderSetting({
                sliderId: 'image-slider',
                slideQuery: '#image-slider .placeholder figure',
                slideContentQuery: 'span',
                definedPreviousNext: false,
                dots: '#image-slider .placeholder .controllers .dots',
                autoSlider: true,
                sliderInterval: 4000
            });
            imageSliderSetting = imageSliderSetting.prepareParameters();

            var imageSlider = new Slider(imageSliderSetting);

        </script>
    @endif
@endsection