@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')
    <div class="content">
        <div class="grid-row top">
            <div class="grid-row full-row">
                <div class="grid-col titleHolder">
                    <span class="transportservice"></span>
                    <h1>{{$page->translation->name}}</h1>
                </div>
            </div>
        </div>

        @if(!empty($page->translation->main))
            <div class="grid-row main">
                <div class="grid-col left">
                    {!! $page->translation->main->description  !!}

                    <a class="button filled yellow"
                       href="{{$page->translation->main->link}}">
                        {{$page->translation->main->link_text}}
                    </a>
                </div>
                <div class="grid-col right">
                    <figure class="large"
                            style="background-image: url('{{$page->translation->main->images[0]['medium']}}');"></figure>
                </div>
            </div>
        @endif

        @if(!empty($page->translation->choose && !empty($page->translation->contact) && !empty($page->translation->ship) && !empty($page->translation->use)))
            <div class="transBlock">
                <div class="grid-row top">
                    <div class="header">
                        <h1>Hoe werkt het?</h1>
                    </div>
                    <div class="icon-holder">
                        <div class="icon choose active">
                            <span>{{$page->translation->choose->typeName}}</span>
                        </div>
                        <div class="icon contact">
                            <span>{{$page->translation->contact->typeName}}</span>
                        </div>
                        <div class="icon ship">
                            <span>{{$page->translation->ship->typeName}}</span>
                        </div>
                        <div class="icon use">
                            <span>{{$page->translation->use->typeName}}</span>
                        </div>
                    </div>
                </div>
                <div class="grid-row bottom">
                    <div class="block-wrapper">
                        <div class="service-block choose active">
                            <div class="grid-col left">
                                {!! $page->translation->choose->description  !!}
                            </div>
                            <div class="grid-col right">
                                <figure class="large"
                                        style="background-image: url('{{$page->translation->choose->images[0]['medium']}}');"></figure>
                            </div>
                        </div>
                        <div class="service-block contact">
                            <div class="grid-col left">
                                {!! $page->translation->contact->description  !!}
                            </div>
                            <div class="grid-col right">
                                <figure class="large"
                                        style="background-image: url('{{$page->translation->contact->images[0]['medium']}}');"></figure>
                            </div>
                        </div>
                        <div class="service-block ship">
                            <div class="grid-col left">
                                {!! $page->translation->ship->description  !!}
                            </div>
                            <div class="grid-col right">
                                <figure class="large"
                                        style="background-image: url('{{$page->translation->ship->images[0]['medium']}}');"></figure>
                            </div>
                        </div>
                        <div class="service-block use">
                            <div class="grid-col left">
                                {!! $page->translation->use->description  !!}
                            </div>
                            <div class="grid-col right">
                                <figure class="large"
                                        style="background-image: url('{{$page->translation->use->images[0]['medium']}}');"></figure>
                            </div>
                        </div>
                    </div>
                    @if(!empty($page->translation->video) && !empty($page->translation->video->youtube))
                        <div class="video-block">
                            <div class="grid-col left">
                                <iframe src="https://www.youtube.com/embed/{{$page->translation->video->youtube}}"
                                        frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        @endif

    </div>
@endsection