@extends('base')

@section('title', $vacancy->translation->name . ' | ' . $page->translation->meta_title)
@section('meta_description', $vacancy->translation->meta_description)

@section('meta_information')
    <meta property="fb:app_id" content="{{config('services.facebook.appId')}}"/>
    <meta property="og:url" content="{{request()->get('original_path')}}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title"
          content="{{$vacancy->translation->meta_title }}"/>
    <meta property="og:description" content="{{$vacancy->translation->meta_description}}"/>

    @if(isset($vacancy->images) && $vacancy->images->count() != 0)
        <meta property="og:image" content="{{\Request::root().$vacancy->images->first()->medium_image_url}}"/>
    @endif
@endsection

@section('base-content')

    {{-- Make a facebook app for this application --}}
    <script>
        window.fbAsyncInit = function () {
            FB.init({
                appId: '{{config('services.facebook.appId')}}',
                autoLogAppEvents: true,
                xfbml: true,
                version: 'v3.1'
            });
        };

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

    @include('organisms.header', [ 'headerIsLight' => true ])

    <div class="l-body">
        <div class="l-block  l-contain  u-spacing-pt5">

            @include('components.breadcrumb', [ 'breadcrumbNameOverrule' => [ 3 => $vacancy->translation->name] ] )

            <div class="o-vacancy  u-spacing-mt5">
                <article class="o-vacancy__main">
                    <h2 class="c-page-title" data-kal="slide-right">{{$vacancy->translation->name}}</h2>
                    <div class="s-text  u-spacing-mt5" data-kal="slide-up">
                        {!! $vacancy->translation->description !!}
                    </div>

                    <ul class="c-checkmarks" data-kal="slide-right">
                        @foreach(__('site/vacancies.cta') as $vacancyCta)
                            <li class="c-checkmarks__item">
                                <div class="c-checkmarks__icon">@include('components.ring', ['modifiers' => 'on-light'])</div>
                                <p class="c-checkmarks__label">{{ $vacancyCta }}</p>
                            </li>
                        @endforeach
                    </ul>
                </article>
                <div class="o-vacancy__side">

                    <div data-kal="slide-down">
                        {{-- TODO: Author data from vacancy --}}
                        @include('components.servicepoint', [
                            'servicePointImage' => '/img/Irene-Hamilton.jpg',
                            'servicePointLabel' => 'Solliciteer direct via onderstaand formulier',
                            'servicePointSubText' => 'Irene Hamilton'
                        ])
                    </div>

                    <div class="o-vacancy__form" data-kal="slide-left">
                        {{-- TODO: Vervangen door sollicitatie formulier --}}
                        @include('organisms.forms.contact')
                    </div>

                </div>
            </div>
        </div>


        @if(isset($otherVacancies) && $otherVacancies->isNotEmpty())

            <div class="l-block  l-contain">

                <h3 class="u-color-secondary--500  u-spacing-mb5">@lang('site/vacancies.otherVacancies')</h3>
                <div class="l-triple-grid">

                    @foreach($otherVacancies as $otherVacancy)
                        <article class="l-triple-grid__item">
                            @include('components.card', [
                                 'modifiers' => 'center',
                                 'clickable' => true,
                                 'cardImage' => isset($otherVacancy->images) && $otherVacancy->images->isNotEmpty() ? $otherVacancy->images->first()->medium_image_url : null,
                                  'cardTitle' => $otherVacancy->translation->name,
                                    'cardDate' => $otherVacancy->date,
                                    'cardDescription' => $otherVacancy->translation->teaser,
                                    'cardLink' => $links->vacancies->route . '/' . $otherVacancy->translation->slug,
                                    'cardButtonText' => __('site/vacancies.viewVacancy'),
                             ])
                        </article>
                    @endforeach

                </div>

            </div>

        @endif

    </div>

    @include('organisms.footer')

@endsection