@extends('web.layouts.container')

@section('content')
<main>
    <!-- Start pg-header -->
    <section class="pg-header section">
        <div class="container">
            <h1 class="title text-white text-uppercase fw-bold text-center">{{ __('main.our_jobs')}}</h1>
        </div>
        <img src="{{ asset('assets/web/images/header-1.png')}}" alt="{{ __('main.our_jobs')}}" class="bg"/>
    </section>
        
    <!-- Start jobs-pg -->
    <section class="jobs-pg section">
        <div class="container">
            <h1 class="title text-capitalize sec_head mb-5 pb-3">
                {!! footerLink(__('main.check_ava_jobs'), false, false, 2) !!}
            </h1>
            <div class="row">
                @foreach ($careers as $item)
                <div class="col-md-6">
                    <div class="job_card   ">
                        <div class="head in-flex">
                            <div class="content">
                                <h4 class="title color-secondary">{{ $item->currentDescription->name }}</h4>
                                <p class="categ mb-0">{{ $item->category_name }}</p>
                            </div>
                            <a href="{{ route('jobs.details', $item->id) }}" class="butn secondary_butn">{{ __('careers.job_details') }}</a>
                        </div>

                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

</main>

@endsection

@section('inner_js')
@endsection