@extends('master')

@section('title', !empty($page->translation->meta_title) ? $page->translation->meta_title : config('site.company.name'))
@section('meta_description', $page->translation->meta_description)

@section('content')
    <div class="l-body  l-body--rounded-tr">
        <div class="l-block  u-spacing-pt5">
            <div class="u-spacing-pb5  l-contain">
                @include('components.breadcrumb')
            </div>
            <div class="l-block">

                @include('organisms.components')

{{--                <h2 class="c-page-title  u-spacing-mb5">@lang('site/vacancies.pageTitle')</h2>--}}
{{--                <div class="o-vacancies">--}}
{{--                    <div class="o-vacancies__main">--}}
{{--                        --}}{{-- TODO: Leading text from vacancies page? --}}
{{--                        <div class="s-text">--}}
{{--                            <p>Aliquid atque consectetur debitis eaque fugit impedit in laborum minus molestias natus necessitatibus neque, nobis nostrum perferendis quibusdam quo reiciendis, reprehenderit soluta ullam velit voluptas voluptatem! Accusamus aliquam ea error in nam nesciunt, pariatur. Doloremque laborum reiciendis sapiente ullam vero? Rerum.</p>--}}
{{--                            <p>Consectetur adipisicing elit. Accusantium amet blanditiis consequatur dolores, esse id iste itaque laborum molestiae neque obcaecati omnis, perferendis quaerat quam quas qui vel velit veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dolore eaque laudantium sed veniam.</p>--}}
{{--                        </div>--}}

{{--                        --}}{{-- TODO: Checkmarks from vacancies page? --}}
{{--                        <ul class="c-checkmarks">--}}
{{--                            @for($i=1; $i<=3; $i++)--}}
{{--                            <li class="c-checkmarks__item">--}}
{{--                                <div class="c-checkmarks__icon">@include('components.ring', ['modifiers' => 'on-light'])</div>--}}
{{--                                <p class="c-checkmarks__label">Lorem ipsum dolor sit amet</p>--}}
{{--                            </li>--}}
{{--                            @endfor--}}
{{--                        </ul>--}}
{{--                    </div>--}}
{{--                    <div class="o-vacancies__side">--}}
{{--                        <div class="c-projector">--}}
{{--                            <figure class="c-projector__figure">--}}
{{--                                <img src="https://source.unsplash.com/dWYU3i-mqEo/612x432" width="612" href="432">--}}
{{--                            </figure>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>

            <div class="l-block  l-contain">
                @if($vacancies->count() != 0)
                    <h3 class="u-color-secondary--500">@lang('site/vacancies.openVacancies')</h3>
                    <div class="l-triple-grid  u-spacing-mt5">
                        @foreach($vacancies as $vacancy)
                            <article class="l-triple-grid__item">
                                @if($vacancy->translation)
                                    @include('components.card', [
                                        'cardImage' =>  (isset($vacancy->images) && $vacancy->images->count() != 0) ? $vacancy->images->first()->medium_image_url : '',
                                        'cardTitle' => $vacancy->translation->name,
                                        'cardDate' => $vacancy->date,
                                        'cardDescription' => $vacancy->translation->teaser,
                                        'cardLink' => $links->vacancies->route . '/' . $vacancy->translation->slug,
                                        'cardButtonText' => __('site/vacancies.viewVacancy'),
                                    ])
                                @endif
                            </article>
                        @endforeach
                    </div>
                @else
                    <h3 class="u-color-secondary--500">@lang('site/vacancies.no_vacancies')</h3>
                @endif

            </div>

        </div>
    </div>
@endsection