@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('common.hr')],
        ['label' => __('recruitment.vacancies.title'), 'url' => route('hr.recruitment.vacancies.index')],
        ['label' => $vacancy->title],
    ];
@endphp

<x-ui.layout.page
    :title="$vacancy->title"
    :subtitle="$vacancy->reference_code"
    page-icon="fe fe-briefcase"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        @can('update', $vacancy)
            <x-ui.buttons.secondary :href="route('hr.recruitment.vacancies.edit', $vacancy)" icon="fe fe-edit-2">
                {{ __('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 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 type="submit">{{ __('recruitment.vacancies.actions.close') }}</x-ui.buttons.secondary>
            </form>
        @endcan
    </x-slot:actions>

    <div class="row g-3 mb-4">
        <x-ui.dashboard.stat-card :label="__('recruitment.vacancies.metrics.openings')" :value="(string) $vacancy->openings" icon="fe fe-layers" />
        <x-ui.dashboard.stat-card :label="__('recruitment.vacancies.metrics.filled')" :value="(string) $vacancy->filled_positions" icon="fe fe-user-check" />
        <x-ui.dashboard.stat-card :label="__('recruitment.vacancies.metrics.applications')" :value="(string) ($vacancy->applications_count ?? 0)" icon="fe fe-file-text" />
        <x-ui.dashboard.stat-card :label="__('recruitment.vacancies.metrics.interviews')" :value="(string) ($vacancy->interviews_count ?? 0)" icon="fe fe-calendar" />
        <x-ui.dashboard.stat-card :label="__('recruitment.vacancies.metrics.offers')" :value="(string) ($vacancy->offer_letters_count ?? 0)" icon="fe fe-mail" />
        <x-ui.dashboard.stat-card :label="__('recruitment.vacancies.metrics.hirings')" :value="(string) ($vacancy->hirings_count ?? 0)" icon="fe fe-user-plus" />
    </div>

    <ul class="nav nav-tabs mb-3">
        @foreach ($tabs as $tabKey)
            <li class="nav-item">
                <a
                    class="nav-link {{ $tab === $tabKey ? 'active' : '' }}"
                    href="{{ route('hr.recruitment.vacancies.show', ['vacancy' => $vacancy, 'tab' => $tabKey]) }}"
                    style="{{ $tab === $tabKey ? 'color: '.config('theme.colors.primary').'; border-color: '.config('theme.colors.primary') : '' }}"
                >
                    {{ __('recruitment.vacancies.tabs.'.$tabKey) }}
                </a>
            </li>
        @endforeach
    </ul>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            @include('pages.hr.recruitment.vacancies.tabs.'.$tab, [
                'vacancy' => $vacancy,
                'tabData' => $tabData,
            ])
        </div>
    </div>
</x-ui.layout.page>
