@php /** @var \Illuminate\Support\Collection $jobs  */ @endphp
@extends('site.master')

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

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

        @include('site.organisms.hero', [
            'heroImages' => $heroImages,
            'heroHeader' => $page->translation->hero_title,
            'heroText' => $page->translation->hero_description,
        ])

        <div class="u-bg-wrapper">

            <div class="u-ornament-triangle"></div>
            <div class="u-bg-triangle-neutral"></div>


            @if(is_array(__('site/jobs.usp.items')))
            <div class="l-contain  o-block  o-usp">
                <h2 class="o-usp__header">@lang('site/jobs.usp.heading')</h2>
                <ul class="o-usp__list">
                        @foreach(__('site/jobs.usp.items') as $item)
                            <li class="o-usp__item">{{$item}}</li>
                        @endforeach
                </ul>
            </div>
            @endif

                <div class="l-contain  o-block">

                    @if($jobs->count() >= 1)
                        <div class="l-newsgrid">
                            <h2 class="l-newsgrid__header  u-text-align-center">@lang('site/jobs.heading')</h2>

                            <ul class="l-newsgrid__list  l-newsgrid__list--no-images">
                                @foreach($jobs as $model)
                                    <li class="l-newsgrid__item">
                                        @include('site.organisms.jobcard', ['parentRoute' => $links->jobs->route])
                                    </li>
                                @endforeach

                                {{-- If odd number of posts show an extra card --}}
                                @if($jobs->count() % 2  == 1)
                                    <li class="l-newsgrid__item  u-hidden@m-down">
                                        <div class="c-newscard">
                                            <article class="c-newscard__frame">
                                                <div class="c-newscard__content  c-newscard__content--message">
                                                    <h2 class="u-fs-m  u-color-primary--500">@lang('site/jobs.noMoreJobs')</h2>
                                                </div>
                                            </article>
                                        </div>
                                    </li>
                                @endif

                            </ul>

                        </div>
                    @else
                        <div class="c-newscard  o-block">
                            <article class="c-newscard__frame  u-spacing-pv">
                                <div class="c-newscard__content  c-newscard__content--message">
                                    <h3 class="u-color-text--800  u-fw-regular">@lang('site/jobs.noJobs')</h3>
                                </div>
                            </article>
                        </div>
                    @endif
                </div>
        </div>

        @include('site.organisms.imageRack', [
            'images' => $sliderImages ?? [],
        ])
@endsection