@extends('site.master', [ 'headerIsLight' => true ])

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

@section('content')
    <div class="c-body">

        @include('site.organisms.componentables.textImage', [
        'component' => (object)[
            'reversed' => true,
            'gradient' => true,
            'corners' => false,
            'text' => '<h1>'.$page->translation->header_title.'</h1>'.$page->translation->header_description,
            'image' => $page->images,
            'button_link' => '#more',
            'button_label' => $page->translation->header_button_label,
        ],
        'loop' => (object)[
            'iteration' => 0,
        ]])

        <div id="more"></div>
        <div class="o-block o-block-bg o-block-grey">
            <div class="o-vacancies_grid">
                @if(count($vacancies) > 0)
                    <div class="c-vacancies_grid">
                        @foreach($vacancies as $vacancy)

                            <article>
                                <div class="text">
                                    <p>{{$vacancy->translation->contract}}</p>
                                    <h5>{{ $vacancy->translation->name }}</h5>
                                    {!! $vacancy->translation->short_description !!}
                                </div>
                                <a href="">
                                    @include('site.components.button', [
                                       'modifiers' => ['icon', 'ghost'],
                                        'buttonLink' => $links->vacancies->route.'/'.$vacancy->translation->slug,
                                        'buttonText' => __('site/vacancies.show'),
                                    ])
                                </a>
                            </article>

                        @endforeach
                    </div>
                @else

                    <div class="u-text-align-center">
                        <h3 class="u-color-secondary">@lang('site/vacancies.no_vacancies')</h3>
                    </div>

                @endif
            </div>
        </div>

        <div class="o-block o-block-bg o-block-white">
            @include('site.components.ctaPerson')
        </div>
@endsection