@extends('layouts.public')
@section('title', $offer->title)

@section('content')

<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-14 grid lg:grid-cols-5 gap-12">

    <div class="lg:col-span-3">
        <a href="{{ route('jobs.index') }}" class="text-sm font-bold text-gray-400 hover:text-navy inline-flex items-center gap-1 mb-5">
            ← Toutes les offres
        </a>
        <h1 class="font-display font-extrabold text-3xl text-navy-dark mb-4">{{ $offer->title }}</h1>

        <div class="flex flex-wrap gap-x-5 gap-y-2 text-sm text-gray-500 mb-8">
            @if($offer->contract_type)<span class="inline-flex items-center gap-1.5"><x-icon name="briefcase" class="w-4 h-4 text-gold" />{{ $offer->contract_type }}</span>@endif
            @if($offer->department)<span class="inline-flex items-center gap-1.5"><x-icon name="building" class="w-4 h-4 text-gold" />{{ $offer->department }}</span>@endif
            @if($offer->location)<span class="inline-flex items-center gap-1.5"><x-icon name="map-pin" class="w-4 h-4 text-gold" />{{ $offer->location }}</span>@endif
            @if($offer->deadline)<span>Clôture le {{ $offer->deadline->translatedFormat('d F Y') }}</span>@endif
        </div>

        <div class="prose prose-navy max-w-none text-gray-600 leading-relaxed mb-8">
            <h3 class="font-display font-bold text-navy-dark">Description du poste</h3>
            {!! nl2br(e($offer->description)) !!}
        </div>

        @if($offer->requirements)
            <div class="prose prose-navy max-w-none text-gray-600 leading-relaxed">
                <h3 class="font-display font-bold text-navy-dark">Profil recherché</h3>
                {!! nl2br(e($offer->requirements)) !!}
            </div>
        @endif
    </div>

    <div class="lg:col-span-2">
        @if($offer->isOpen())
            <div class="bg-gray-50 rounded-2xl p-6 sm:p-7 sticky top-24">
                <h3 class="font-display font-bold text-lg text-navy-dark mb-5">Postuler à cette offre</h3>
                @include('public.jobs._application_form', ['action' => route('jobs.apply', $offer)])
            </div>
        @else
            <div class="bg-gray-50 rounded-2xl p-7 text-center">
                <p class="font-bold text-gray-500">Cette offre n'est plus ouverte aux candidatures.</p>
                <a href="{{ route('jobs.spontaneous') }}" class="inline-block mt-4 text-sm font-bold text-gold hover:text-gold-dark">Envoyer une candidature spontanée →</a>
            </div>
        @endif
    </div>
</section>

@endsection