@extends('site.master')

@section('title', $vacancy->translation->name . ' | Werken bij Komma | ' . __('site/meta.title'))

@section('metaTags')
    <meta property="og:title"
          content=" {{ $vacancy->translation->name . ' | Werken bij Komma | ' . __('site/meta.title') }}"/>
    <meta property="og:description" content="{{ $vacancy->translation->meta_description }}"/>
    @if(isset($vacancy->images) && $vacancy->images->count() != 0)
        <meta property="og:image" content="{{ URL::to($vacancy->images->first()->medium_image_url) }}"/>
    @endif
@stop

@section('content')

    <main itemprop="description">

        @if(isset($vacancy->images) && $vacancy->images->count() != 0)

            {{-- Header --}}
            <header class="c-header">
                <img class="c-header__img"
                     sizes="(max-width: 1344px) 100vw, 1344px"
                     srcset="{{ $vacancy->images->first()->small_image_url }} 360w,
                                {{ $vacancy->images->first()->medium_image_url }} 754w,
                                {{ $vacancy->images->first()->large_image_url }} 1270w,
                                {{ $vacancy->images->first()->original_image_url }} 1344w"
                     src="{{ $vacancy->images->first()->original_image_url }}"
                     alt="">
                <h1 class="c-header__title">{{ $vacancy->translation->image_title }}</h1>

                @include('site.partials.headerDrips')
            </header>

        @endif

        {{-- Intro text--}}
        <section class="c-intro">
            <p class="c-intro__main">{!! nl2br($vacancy->translation->intro_description) !!}</p>
            <p class="c-intro__appendix">{{ $vacancy->translation->intro_appendix }}</p>
        </section>

        <div class="t-vacancy__dynamic  @if($vacancy->blocks->count() == 0) t-vacancy__dynamic--empty @endif">
            <div class="contained-layout">
                @foreach($vacancy->blocks as $block)
                    @if(\View::exists($block->view))
                        @include($block->view,[
                            'block' => $block
                        ])
                    @endif
                @endforeach
            </div>
        </div>

        {{-- Komma biedt --}}
{{--        @if(!empty($vacancy->translation->benefit_1))--}}
{{--            <section class="contained-layout">--}}
{{--                <div class="c-subsection">--}}
{{--                    <h2 class="c-subheader">Komma biedt</h2>--}}
{{--                    <ul class="c-benefits">--}}
{{--                        @for($i = 1; $i <= 9; $i++)--}}
{{--                            @continue(empty($vacancy->translation->{'benefit_'.$i}))--}}
{{--                            <li class="c-benefits__item"><p class="c-benefits__text">{{ $vacancy->translation->{'benefit_'.$i} }}</p></li>--}}
{{--                        @endfor--}}
{{--                    </ul>--}}
{{--                </div>--}}
{{--            </section>--}}
{{--        @endif--}}

        {{-- Duo picture--}}
        <section class="contained-layout">
            <div class="c-duo-picture">
                <img class="c-duo-picture__img" src="/img/komma/vacancies/template-{{$vacancy->photo_template ?? 0}}/duo-1.jpg?v=2" alt="">
                <img class="c-duo-picture__img" src="/img/komma/vacancies/template-{{$vacancy->photo_template ?? 0}}/duo-2.jpg?v=2" alt="">
            </div>
        </section>

        @if(1 == 2 )
            <section class="contained-layout">
                <div class="job-description">

                    @if(isset($vacancy->blocks))

                        @foreach($vacancy->blocks as $block)

                            @if(View::exists($block->view))
                                @include($block->view,[
                                    'block' => $block
                                ])
                            @endif

                        @endforeach

                    @endif

                </div>
            </section>
        @endif

        {{-- Duo picture--}}
    {{--    <section class="contained-layout">--}}
    {{--        <div class="c-duo-picture">--}}
    {{--            <img class="c-duo-picture__img" src="/img/komma/static/drinks.jpg" alt="">--}}
    {{--            <img class="c-duo-picture__img" src="/img/komma/static/waaier.jpg" alt="">--}}
    {{--        </div>--}}
    {{--    </section>--}}


        {{-- Jij bent   --}}
        @if(!empty($vacancy->translation->personality_title_1 && !empty($vacancy->translation->personality_description_1)))
            <section class="contained-layout">
                <div class="c-subsection">
                    <h2 class="c-subheader">Jij bent</h2>
                    <ul class="c-personality">
                        @for($i = 1; $i <= 5; $i++)
                            @continue(empty($vacancy->translation->{'personality_title_'.$i}) || empty($vacancy->translation->{'personality_description_'.$i}))
                            <li class="c-personality__item">
                                <p class="c-personality__label">{{ $vacancy->translation->{'personality_title_'.$i} }}</p>
                                <p class="c-personality__description">{!! nl2br($vacancy->translation->{'personality_description_'.$i}) !!}</p>
                            </li>
                        @endfor
                    </ul>
                </div>
            </section>
        @endif


        {{-- Slick slider --}}
        <div class="c-picture-slider">
            <div class="c-picture-slider__controls  js-picture-slider__controls">
                <button class="c-picture-slider__prev"></button>
                <button class="c-picture-slider__next"></button>
            </div>
            <div class="c-picture-slider__images  js-picture-slider">
                @for($i = 1; $i <= 14; $i++)
                    <img class="c-picture-slider__img" src="/img/komma/vacancies/template-{{$vacancy->photo_template ?? 0}}/slider-{{ $i }}.jpg?v=2" alt="">
                @endfor
            </div>

        </div>


        {{-- Skills --}}
        @if(!empty($vacancy->translation->skill_1))
            <section class="u-bg-dark">
                <div class="contained-layout">
                    <div class="c-subsection">
                        <div class="l-split">
                            <div class="l-split__item">
                                <h2 class="c-subheader  c-subheader--light">Skills</h2>
                            </div>
                            <div class="l-split__item">
                                <ul class="c-skills">
                                    @for($i = 1; $i <= 12; $i++)
                                        @continue(empty($vacancy->translation->{'skill_'.$i}))
                                        <li class="c-skills__item">{{ $vacancy->translation->{'skill_'.$i} }}</li>
                                    @endfor
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

    </main>


    {{-- Form --}}
    <section id="arrow-target" class="contained-layout">
        <div class="c-subsection">
            @include('site.blocks.vacancies.applyCtaCustom')
        </div>
    </section>

    {{-- Vragen callout --}}
    <section>
        <div class="c-questions">
            <figure class="c-questions__figure">
                <img class="c-questions__img" src="/img/komma/tim_square.jpg" alt="">
                <figcaption class="c-questions__caption">Tim Lammers &middot; Operationeel directeur</figcaption>
            </figure>

            <div class="c-questions__body">
                <h3 class="c-questions__header">Vragen over de vacature?</h3>
                <p class="c-questions__info">
                    Bel +31 495 - 59 94 11 en vraag naar Tim,<br>
                    of stuur een mailtje via <a href="mailto:solliciteren@komma.pro">solliciteren@komma.pro</a>
                </p>
            </div>
        </div>
    </section>

    {{-- Back  --}}
    <section class="contained-layout">
        <div class="back-to-grid-holder col-6 centered">
            <a class="back-to-grid" href="/vacatures" data-name="services">Terug naar vacatures</a>
        </div>
    </section>

@endsection