@extends('layouts.client')

@section('content')
    <!-- section -->
	<section class="slider slider-banner">
		<!-- #slider-banner -->
		<div id="slider-banner" class="carousel slide" data-bs-ride="carousel">
			<!-- .carousel-inner -->
			<div class="carousel-inner">
				<!-- .carousel-item -->
				<div class="carousel-item active lozad"  data-background-image="{{ asset("assets/img/careers/banner.jpg") }}">
					<!-- .container -->
					<div class="container h-100 carousel-content">
						<!-- .row -->
						<div class="row align-items-center h-100">
							<!-- .col -->
							<div class="col-md-6">
								<h1><strong>Careers</strong></h1>
								<p>Neque porro quisquam est qui dolorem</p>
							</div>
						</div>
					</div>					
				</div>
			</div>
		</div>
	</section>
	
	<!-- .careers-->
	@if (count($careers) > 0)
		<section class="bg-shade">
			<!-- .container -->
			<div class="container">
				<!-- .row -->
				<div class="row mb-5">
					@foreach($careers as $value)
						<!-- .col -->
						<div class="col-md-6">
							<div class="card mb-4">

								<div class="card-body">
									<!-- .card-comment -->
									<div class="card-comment">
										<!-- .icon-holder -->
										<div class="icon-holder"><i class="fal fa-briefcase"></i></div>

										<!-- .text-holder -->
										<div class="text-holder">
											<h4>{{ $value->title }}</h4>
											<p>{{ $value->excerpt }}</p>
										</div>
									</div>
								</div>
								

								<div class="card-footer">
									<a href="{{ route('contact') }}" class="btn btn-primary">Apply Now</a>
								</div>
							</div>
						</div>
					@endforeach
				</div>
				
				<!-- .row -->
				<div class="d-flex justify-content-center">
					{{ $careers->links() }}
				</div>
			</div>
		</section> 
	@endif
@endsection