@extends('layouts.careers')
@section('title', 'Open positions')
@section('content')
    <div class="careers-hero">
        <h1 class="h3 mb-2 font-weight-bold">Open positions</h1>
        <p class="mb-0 opacity-90">Explore roles and apply with your CV in a few minutes.</p>
    </div>
    <div class="row">
        @forelse($jobs as $job)
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card job-card h-100">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title font-weight-bold">{{ $job->title }}</h5>
                        <p class="text-muted small mb-2">
                            @if($job->warehouse)
                                <span class="badge badge-soft">{{ $job->warehouse->name }}</span>
                            @endif
                            @if($job->closing_date)
                                <span class="ml-1">Closes {{ $job->closing_date->format('M j, Y') }}</span>
                            @else
                                <span class="ml-1">Open until filled</span>
                            @endif
                        </p>
                        <p class="card-text text-secondary small flex-grow-1">{{ \Illuminate\Support\Str::limit(strip_tags($job->description), 140) }}</p>
                        <a class="btn btn-primary btn-sm mt-2 align-self-start" href="{{ route('careers.show', $job->slug) }}">View &amp; apply</a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-light border">No open positions right now. Please check back later.</div>
            </div>
        @endforelse
    </div>
    <div class="d-flex justify-content-center">
        {{ $jobs->links() }}
    </div>
@endsection