<?php
$jobsBlocks = $page->content->translation->description;
?>

@extends('layouts.master', ['view' => 'jobs'])

@section('editable_content')

    <div class="jobs-content">
        <div class="grid-row top">
            <div class="grid-col col-12">
                @include('layouts.partials.breadcrumb')

                @if(!empty($jobsBlocks['mainText']->status))
                    <div class="jobs-intro">
                        <div class="grid-row full-row">
                            <div class="grid-col col-4 offset-1">

                                <h1>{{$jobsBlocks['mainText']->typeName}}</h1>

                            </div>
                            <div class="grid-col col-7 textholder">
                                <div class="text">
                                    {{$jobsBlocks['mainText']->description}}
                                </div>

                            </div>

                        </div>
                    </div>

                    <div class="jobs-diensten-menu">
                        <div class="grid-row full-row">

                            <section class="grid-col col-12 offset-1">
                                @if($jobs->count() > 0)
                                    @foreach($jobs as $key => $job)
                                        <article id="{{$job->id}}" class="grid-col col-6 @if(!isset($job->images) || $job->images->count() == 0) no-image @endif">
                                            <a href="/{{$job->translations->first()->routes->filter(function($route) use ($page) {
                                                        if( starts_with($route->route, $page->translation->route->route)){
                                                            return $route->route;
                                                        }
                                                    })->first()->route
                                                }}">
                                                <div class="content">
                                                    <h3>{{$job->translations->first()->name}}</h3>
                                                    <p>{{$job->translations->first()->excerpt}}</p>
                                                </div>
                                                <br/>
                                                <span class="button blue arrow pull-right">Bekijk vacature</span>
                                            </a>
                                        </article>
                                    @endforeach
                                @else
                                    <h3>Er zijn op dit moment geen openstaande vacatures.</h3><p>Toch overtuigd dat wij niet zonder jou kunnen? Neem dan <a href="/contact">contact</a> met ons op!</p>
                                @endif
                            </section>

                        </div>
                    </div>
                @endif
            </div>
        </div>
        @if(!empty($jobsBlocks['uit-je-dak']->status))
            <div class="grid-row full-row uit-je-dak">
                <div class="grid-row">
                    <div class="grid-col col-4 textholder">
                        <div class="text">
                            {{$jobsBlocks['uit-je-dak']->description}}
                        </div>
                        <a href="{{$jobsBlocks['uit-je-dak']->link}}"
                           class="button blue arrow">{{$jobsBlocks['uit-je-dak']->link_text}}</a>
                    </div>
                    <div class="grid-col pull-right imgholder"
                         style="background-image: url('{{$jobsBlocks['uit-je-dak']->images[0]->large_image_url}}')"></div>
                </div>
            </div>
        @endif

        @if(!empty($jobsBlocks['CTABlock']->status))
            @include("layouts.partials.callToActionContact", ['name' => 'Wim Verhoeven', 'jobtitle' => 'Bedrijfsleider', 'phone' => '06 53 76 04 49', 'phoneLink' => '0031653760449', 'img' => '/img/personeel/Wim.jpg'])
        @endif

    </div>

@endsection