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

<x-ui.layout.page
    :title="$employee->full_name"
    :subtitle="$employee->employee_code"
    page-icon="fe fe-user"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        @can('update', $employee)
            <x-ui.buttons.secondary :href="route('hr.employees.edit', $employee)" icon="fe fe-edit-2">
                {{ __('employees.actions.edit') }}
            </x-ui.buttons.secondary>
        @endcan
        <x-ui.buttons.secondary :href="route('hr.employees.index')" icon="fe fe-arrow-left">
            {{ __('employees.actions.back_to_list') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    <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.employees.show', ['employee' => $employee, 'tab' => $tabKey]) }}"
                    style="{{ $tab === $tabKey ? 'color: '.config('theme.colors.primary').'; border-color: '.config('theme.colors.primary') : '' }}"
                >
                    {{ __('employees.tabs.'.$tabKey) }}
                </a>
            </li>
        @endforeach
    </ul>

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