@php
    $pageTitle = $job->seo_title ?: $job->title;
@endphp
<x-ui.layout.career-portal :title="$pageTitle" :settings="$settings" :tenant="$tenant">
    <section class="cp-job-hero">
        <div class="container">
            <a class="cp-link small" href="{{ route('careers.jobs', ['tenant' => $tenant->slug]) }}">← {{ __('recruitment.career_portal.nav.jobs') }}</a>
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mt-3">
                <div>
                    @if ($job->is_featured)
                        <span class="cp-badge cp-badge-accent mb-2">{{ __('recruitment.career_portal.featured_badge') }}</span>
                    @endif
                    <h1 class="h2 mb-2">{{ $job->title }}</h1>
                    <div class="cp-meta mb-0">
                        @if ($job->department)
                            <span><i class="fe fe-briefcase me-1"></i>{{ $job->department->name }}</span>
                        @endif
                        @if ($job->position)
                            <span><i class="fe fe-user me-1"></i>{{ $job->position->title }}</span>
                        @endif
                        <span><i class="fe fe-users me-1"></i>{{ $job->openings }} {{ __('recruitment.vacancies.fields.openings') }}</span>
                        @if ($job->closes_at)
                            <span><i class="fe fe-calendar me-1"></i>{{ __('recruitment.vacancies.fields.closes_at') }}: {{ $job->closes_at->format('Y-m-d') }}</span>
                        @endif
                    </div>
                </div>
                <a class="cp-btn" href="{{ route('careers.jobs.apply', ['tenant' => $tenant->slug, 'vacancy' => $job->slug]) }}">
                    {{ __('recruitment.career_portal.actions.apply') }}
                </a>
            </div>
        </div>
    </section>

    <div class="container py-4 py-md-5">
        <div class="row g-4">
            <div class="col-lg-8">
                <div class="cp-card">
                    <h2 class="h5 mb-3">{{ __('recruitment.career_portal.job_description') }}</h2>
                    <div class="cp-prose">{{ $job->description ?: __('recruitment.career_portal.no_description') }}</div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="cp-card mb-3">
                    <h2 class="h6 mb-3">{{ __('recruitment.career_portal.job_summary') }}</h2>
                    <dl class="mb-0 small">
                        <dt class="cp-muted">{{ __('recruitment.vacancies.fields.department') }}</dt>
                        <dd class="mb-3">{{ $job->department?->name ?? '—' }}</dd>
                        <dt class="cp-muted">{{ __('recruitment.vacancies.fields.position') }}</dt>
                        <dd class="mb-3">{{ $job->position?->title ?? '—' }}</dd>
                        <dt class="cp-muted">{{ __('recruitment.vacancies.fields.openings') }}</dt>
                        <dd class="mb-0">{{ $job->openings }}</dd>
                    </dl>
                </div>
                <div class="cp-card" style="background: var(--cp-gradient); color: #fff; border: 0;">
                    <h2 class="h6 text-white mb-2">{{ __('recruitment.career_portal.ready_to_apply') }}</h2>
                    <p class="small opacity-75 mb-3">{{ __('recruitment.career_portal.ready_to_apply_lead') }}</p>
                    <a class="cp-btn" href="{{ route('careers.jobs.apply', ['tenant' => $tenant->slug, 'vacancy' => $job->slug]) }}">
                        {{ __('recruitment.career_portal.actions.apply_now') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</x-ui.layout.career-portal>
