@extends('front.app')
@section('content')
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gy-10 gx-lg-8 gx-xl-12 align-items-center">
                <div class="col-lg-7 order-lg-2 position-relative">
                    <figure><img class="w-auto" src="{{ asset('front/img/illustrations/i14.png') }}"
                            srcset="{{ asset('front/img/illustrations/i14@2x.png') }} 2x" alt="" /></figure>
                </div>
                <!--/column -->
                <div class="col-lg-5">
                    <h2 class="display-4 mb-3">{{ trans('module.careers_title') }}</h2>
                    <p class="lead fs-lg">{{ trans('module.careers_text') }}</p>

                    <!--/column -->
                </div>
                <!--/.row -->
            </div>
            <div class="job-list mb-10">
                <div class="card mb-4 lift">
                    <div class="card-body p-5">
                        <span class="row justify-content-between align-items-center">
                            <span class="col-3 mb-2 mb-md-0 d-flex align-items-center text-body">
                                <i class="uil uil-label-alt me-1"></i>{{ trans('module.careers_tabel_column_1') }}
                            </span>
                            <span class="col-2 text-body d-flex align-items-center">
                                <i class="uil uil-info-circle me-1"></i>{{ trans('module.careers_tabel_column_2') }}</span>
                            <span class="col-2 col-lg-2 text-body d-flex align-items-center">
                                <i class="uil uil-info-circle me-1"></i>{{ trans('module.careers_tabel_column_3') }}</span>
                            <span class="col-3 col-lg-3 text-body d-flex align-items-center">
                                <i class="uil uil-clock me-1"></i>{{ trans('module.careers_tabel_column_4') }}</span>
                            <span class="d-none d-lg-block col-2 text-center text-body">
                                <i class="uil uil-info-circle me-1"></i>{{ trans('module.careers_tabel_column_5') }}
                            </span>
                        </span>
                    </div>
                </div>

                @foreach ($careers as $career)
                    <div class="card mb-4">
                        <div class="card-body p-5">
                            <span class="row justify-content-between align-items-center">
                                <span class="col-3 mb-2 mb-md-0 d-flex align-items-center text-body">
                                    {{ $career->title }}
                                </span>
                                <span class="col-2 col-md-2 text-body d-flex align-items-center">
                                    {{ $career->employment_time }}</span>
                                <span class="col-2 col-md-2 col-lg-2 text-body d-flex align-items-center">
                                    {{ $career->employment_location_type }}</span>
                                <span class="col-3 col-md-3 col-lg-3 text-body d-flex align-items-center">
                                    {{ $career->contest_date }}</span>
                                <span class="d-none d-lg-block col-2 text-center text-body">
                                    <show-career-details :career="{{$career}}"></show-career-details>
                                </span>
                            </span>
                        </div>
                    </div>
                @endforeach
                <!-- /.card -->
            </div>
        </div>
            <!-- /.container -->
    </section>
    <!-- /section -->
@endsection