@extends('site.master')

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

@section('hero-body')
    @include('site.components.heroHeading', [
               'heroHeadingTitle' => ( !empty($page->translation->visual_name) ? $page->translation->visual_name : $page->translation->name),
               'heroHeadingSubTitle' => $page->translation->description
           ])
@endsection

@section('content')

    @include('site.components.hero')

    <div class="c-body  o-blocks">
        <div class="l-grid  o-block">

            <section class="t-jobs">

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

                    @foreach($jobs as $job)

                        {{-- TODO: Fix me that I dont resize when text is to less --}}
                        <article class="c-media">
                            <a class="c-media__link" href="/{{$links->jobs->route}}/{{$job->translation->slug}}">
{{--                                <div class="c-media__image">--}}
{{--                                    @if(isset($job->images) && $job->images->isNotEmpty())--}}
{{--                                        --}}{{-- TODO: Make span and align content --}}
{{--                                        <img src="{{ $job->images->first()->small_image_url }}"/>--}}
{{--                                    @endif--}}
{{--                                </div>--}}
                                <div class="c-media__body">
                                    <h3 class="c-media__title">{{ $job->translation->name }}</h3>
                                    <div class="c-media__description s-text">
                                        {!! $job->translation->description !!}
                                    </div>

                                    <p class="c-media__action">
                                        <span class="c-media__label">Read more</span>
                                        <i class="c-media__icon">@include('site.components.icons.arrow')</i>
                                    </p>
                                </div>
                            </a>
                        </article>

                    @endforeach

                @else


                    <div class="c-empty">
                        <div>
                            <h3>@lang('site/jobs.noJobs')</h3>
                            <p>@lang('site/jobs.openSolicitation')</p>
                            <p>&nbsp;</p>
                            @include('site.components.buttonLink', ['buttonLink' => '/' . $links->contact->route, 'buttonText' => __('site/global.contactUs')])
                        </div>
                    </div>

                @endif

            </section>

        </div>

{{--        <div class="l-grid  o-block-bg">--}}
{{--            @include('site.components.cta.cta--bar')--}}
{{--        </div>--}}
    </div>
@endsection