@extends('layouts.master')

@section('editable_content')

    <div class="header-image streamer"  @if(isset($page->content->home_slogan) && $page->content->home_slogan->images->count() != 0) style="background-image: url('{{$page->content->home_slogan->images->first()->large_image_url}}');" @endif>
        <div class="content-container">

                @if(isset($page->content->home_slogan))
                    <h1>{{ $page->content->home_slogan->translation->name }}</h1>
                    {{ $page->content->home_slogan->translation->description }}
                @else
                    <h1>Voeg een tekstblok toe met<br/>code_name 'home_slogan'</h1>
                    <p>Titel + Omschrijving + 1 afbeelding. In de titel kan eventueel &lt;br/&gt; gezet<br/>worden om een enter te maken.
                    </p>
                @endif

        </div>
    </div>

    <div class="intro-row">
        <div class="content-container">

            {{--@foreach($page->content as $key => $block)
                {{($block->translation->description)}}<br/>
            @endforeach--}}


            <div class="intro-block">
                @if(isset($page->content->home_introduction))
                    <h3>{{ $page->content->home_introduction->translation->name }}</h3>
                    {{ $page->content->home_introduction->translation->description }}
                @else
                    <h3>Voeg een tekstblok toe met code_name 'home_introduction'</h3>
                    <p>Titel + omschrijving</p>
                @endif
            </div>

            <div class="intro-btns">
                <div class="btn-call button-linking" data-href="tel:{{Config::get('business.phone.call')}}">
                    <div class="icon">
                        <img id="call-icon" class="svg" src="/img/icons/call_icon.svg"/>
                    </div>
                    <div class="seperator-10"></div>
                    {{Config::get('business.phone.display')}}
                </div>
                <div class="btn-contact button-linking" data-href="{{url('contact')}}">
                    Contact
                    <div class="seperator-10"></div>
                    <div class="icon">
                        <img id="contact-icon" class="svg" src="/img/icons/arrow_right_icon.svg"/>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="discover-row">
        <div class="content-container">

            @if(isset($page->content->home_options))
                <h2>{{ $page->content->home_options->translation->name }}</h2>
                {{ $page->content->home_options->translation->description }}
            @else
                <h2>Voeg een tekstblok toe met code_name 'home_options'</h2>
                <p>Titel + omschrijving + afbeeldingen voor hieronder</p>
            @endif

            <div class="seperator-50"></div>
            <div class="discover-block">

                {{--Item 1--}}
                <div class="discover-item-wrapper">
                    <div class="discover-item item-1 button-linking" @if(isset($page->content->home_options) && isset($page->content->home_options->images[0])) style="background-image: url(' {{$page->content->home_options->images[0]->medium_image_url}}'); " @endif data-href="@lang('translations.home_option_1.link')">
                    </div>
                    <div class="discover-item-content"><a href="@lang('translations.home_option_1.link')">@lang('translations.home_option_1.name')</a></div>
                </div>

                {{--Item 2--}}
                <div class="discover-item-wrapper">
                    <div class="discover-item item-2 button-linking" @if(isset($page->content->home_options) && isset($page->content->home_options->images[1])) style="background-image: url(' {{$page->content->home_options->images[1]->medium_image_url}}'); " @endif data-href="@lang('translations.home_option_2.link')">
                    </div>
                    <div class="discover-item-content"><a href="@lang('translations.home_option_2.link')">@lang('translations.home_option_2.name')</a></div>
                </div>

                {{--Item 3--}}
                <div class="discover-item-wrapper">
                    <div class="discover-item item-3 button-linking" @if(isset($page->content->home_options) && isset($page->content->home_options->images[2])) style="background-image: url(' {{$page->content->home_options->images[2]->medium_image_url}}'); " @endif data-href="@lang('translations.home_option_3.link')">
                    </div>
                    <div class="discover-item-content"><a href="@lang('translations.home_option_3.link')">@lang('translations.home_option_3.name')</a></div>
                </div>

                {{--Item 4--}}
                <div class="discover-item-wrapper">
                    <div class="discover-item item-4 button-linking" @if(isset($page->content->home_options) && isset($page->content->home_options->images[3])) style="background-image: url(' {{$page->content->home_options->images[3]->medium_image_url}}'); " @endif data-href="@lang('translations.home_option_4.link')">
                    </div>
                    <div class="discover-item-content"><a href="@lang('translations.home_option_4.link')">@lang('translations.home_option_4.name')</a></div>
                </div>

            </div>

        </div>

    </div>

    @include('layouts.partials.cta')

@endsection