@php
    /** @var \App\Modules\HR\Recruitment\Models\RecruitmentVacancy $vacancy */
    $metrics = [
        ['label' => __('recruitment.vacancies.metrics.openings'), 'value' => (int) $vacancy->openings],
        ['label' => __('recruitment.vacancies.metrics.filled'), 'value' => (int) $vacancy->filled_positions],
        ['label' => __('recruitment.vacancies.metrics.applications'), 'value' => (int) ($vacancy->applications_count ?? 0)],
        ['label' => __('recruitment.vacancies.metrics.interviews'), 'value' => (int) ($vacancy->interviews_count ?? 0)],
        ['label' => __('recruitment.vacancies.metrics.offers'), 'value' => (int) ($vacancy->offer_letters_count ?? 0)],
        ['label' => __('recruitment.vacancies.metrics.hirings'), 'value' => (int) ($vacancy->hirings_count ?? 0)],
    ];
@endphp

<div class="card border-0 shadow-sm h-100" data-vacancy-card>
    <div class="card-body">
        <div class="d-flex flex-wrap justify-content-between gap-2 mb-2">
            <div class="min-w-0">
                <a href="{{ route('hr.recruitment.vacancies.show', $vacancy) }}" class="text-decoration-none" data-vacancy-open>
                    <h3 class="h6 mb-1" style="color: {{ config('theme.colors.text') }};">{{ $vacancy->title }}</h3>
                </a>
                <div class="small text-muted mb-1"><code>{{ $vacancy->reference_code }}</code></div>
                <div class="small text-muted">
                    <span class="me-2">{{ __('recruitment.vacancies.fields.department') }}: {{ $vacancy->department?->name ?? '—' }}</span>
                    <span>{{ __('recruitment.vacancies.fields.position') }}: {{ $vacancy->position?->title ?? '—' }}</span>
                </div>
            </div>
            <div class="d-flex flex-wrap gap-1 align-items-start">
                <x-ui.operational.status-badge :label="__('recruitment.vacancies.status.'.$vacancy->status)" variant="neutral" />
                @if ($vacancy->show_on_portal)
                    <x-ui.operational.status-badge :label="__('recruitment.career_portal.on_portal')" variant="success" />
                @endif
            </div>
        </div>

        <div class="row g-2 mb-3">
            @foreach ($metrics as $metric)
                <div class="col-4 col-md-2">
                    <div class="rounded-3 px-2 py-2 text-center" style="background: color-mix(in srgb, {{ config('theme.colors.primary') }} 8%, transparent);">
                        <div class="fw-semibold" style="color: {{ config('theme.colors.primary') }};">{{ $metric['value'] }}</div>
                        <div class="small text-muted text-truncate">{{ $metric['label'] }}</div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="d-flex flex-wrap gap-2">
            <x-ui.buttons.secondary size="sm" :href="route('hr.recruitment.vacancies.show', $vacancy)">
                {{ __('recruitment.vacancies.actions.view') }}
            </x-ui.buttons.secondary>
            @can('update', $vacancy)
                <x-ui.buttons.secondary size="sm" :href="route('hr.recruitment.vacancies.edit', $vacancy)">{{ __('common.edit') }}</x-ui.buttons.secondary>
            @endcan
            @can('publish', $vacancy)
                <form method="POST" action="{{ route('hr.recruitment.vacancies.publish', $vacancy) }}">@csrf
                    <x-ui.buttons.primary size="sm" type="submit">{{ __('recruitment.vacancies.actions.publish') }}</x-ui.buttons.primary>
                </form>
            @endcan
            @can('close', $vacancy)
                <form method="POST" action="{{ route('hr.recruitment.vacancies.close', $vacancy) }}">@csrf
                    <x-ui.buttons.secondary size="sm" type="submit">{{ __('recruitment.vacancies.actions.close') }}</x-ui.buttons.secondary>
                </form>
            @endcan
            <x-ui.buttons.secondary
                size="sm"
                :href="route('hr.recruitment.vacancies.show', ['vacancy' => $vacancy, 'tab' => 'applications'])"
            >
                {{ __('recruitment.vacancies.actions.view_applications') }}
            </x-ui.buttons.secondary>
        </div>
    </div>
</div>
