@extends('site.base')

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

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

@endsection

@section('hero-body')

    <div class="t-careers-job__heading  t-careers-job__contain">
        <div>
            <h1 class="t-careers-job__heading-title">{{ $careersJob->name }}</h1>
            <div class="t-careers-job__sub-heading">
                <div class="t-careers-job__sub-heading-icon">
                    @include('site.components.icons.location')
                </div>
                <div class="t-careers-job__sub-heading-text">
                    {{ $careersJob->api->location }}
                </div>
            </div>
        </div>
    </div>

@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('site.organisms.header')

    @include('site.organisms.stickyHeader')

    @include('site.components.overlayMenu')

    @include('site.components.hero', ['modifiers' => ['tight', 'light-bg']])

    <div class="t-careers-job__subheader  t-careers-job__contain" id="subheader">
        <div class="t-careers-job__subheader-back">
            @include('site.components.textButtonLink', [
                'modifiers' => ['icon', 'reverse', 'grey'],
                'textButtonText' => 'Job openings',
                'textButtonLink' => '/'. $links->jobs->route
            ])
        </div>
        <div class="t-careers-job__subheader-apply">
            @include('site.components.buttonLink', [
                'buttonLink' => $careersJob->api->careers_apply_url,
                'buttonText' => 'Apply for this job'
            ])
        </div>
    </div>


    <div class="c-body  o-blocks  t-careers-job__blocks">
        @include('site.organisms.components')
    </div>

    <div class="t-careers-job__subfooter  t-careers-job__contain">
        <div class="t-careers-job__subfooter-back">
            @include('site.components.textButtonLink', [
                'modifiers' => ['icon', 'reverse', 'grey'],
                'textButtonText' => 'Job openings',
                'textButtonLink' => '/'. $links->jobs->route
            ])
        </div>
        <div class="t-careers-job__subfooter-apply">
            @include('site.components.buttonLink', [
                'buttonLink' => $careersJob->api->careers_apply_url,
                'buttonText' => 'Apply for this job'
            ])
        </div>

        <a href="#subheader" class="t-careers-job__subfooter-top  scroll-to-target">
            @include('site.components.icons.arrowheadResponsive')
        </a>
    </div>

    @include('site.organisms.footer')

@endsection