@php
    $na = fn ($value) => filled($value) ? $value : '—';
    $dobAccess = $staff360DemographicsAccess ?? [];
    $dobDisplay = ($dobAccess['canViewAnyDateOfBirthInfo'] ?? false)
        ? ($dobAccess['displayDateOfBirth'] ?? $na($employee->date_of_birth ?? null))
        : '—';
    $linkedUser = $linkedUser ?? null;
    $roleLabel = $linkedUser
        ? $linkedUser->displayLoanRoleLabel()
        : '—';
@endphp

<aside class="space-y-4 xl:sticky xl:top-24 xl:max-h-[calc(100vh-7rem)] xl:overflow-y-auto xl:overscroll-y-contain" style="scrollbar-width: thin;">
    <div x-show="!isTab('employment')" x-cloak class="space-y-4">
        <x-loan.staff360-ui-card title="Profile summary">
        <dl class="space-y-2.5 text-sm">
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-2">
                <dt class="text-slate-500">National ID</dt>
                <dd class="font-medium text-slate-800">{{ $na($employee->national_id) }}</dd>
            </div>
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-2">
                <dt class="text-slate-500">Gender</dt>
                <dd class="font-medium text-slate-800">{{ $na($employee->gender) }}</dd>
            </div>
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-2">
                <dt class="text-slate-500">Date of birth</dt>
                <dd class="font-medium text-slate-800">{{ $dobDisplay }}</dd>
            </div>
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-2">
                <dt class="text-slate-500">Email</dt>
                <dd class="max-w-[9rem] truncate font-medium text-slate-800" title="{{ $employee->email }}">{{ $na($employee->email) }}</dd>
            </div>
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-2">
                <dt class="text-slate-500">Phone</dt>
                <dd class="font-medium text-slate-800">{{ $na($employee->phone) }}</dd>
            </div>
            <div class="flex items-center justify-between gap-2">
                <dt class="text-slate-500">Address</dt>
                <dd class="max-w-[9rem] truncate text-right font-medium text-slate-800" title="{{ $employee->physical_address ?? '' }}">{{ $na($employee->physical_address ?? null) }}</dd>
            </div>
        </dl>
    </x-loan.staff360-ui-card>

    <x-loan.staff360-ui-card title="System access">
        <dl class="space-y-2.5 text-sm">
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-2">
                <dt class="text-slate-500">Portal account</dt>
                <dd class="font-medium {{ $linkedUser ? 'text-slate-800' : 'text-slate-500' }}">{{ $linkedUser ? 'Linked' : 'Not linked' }}</dd>
            </div>
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-2">
                <dt class="text-slate-500">Login</dt>
                <dd class="font-medium {{ $employee->hasLoginAccess() ? 'text-emerald-700' : 'text-rose-700' }}">{{ $employee->hasLoginAccess() ? 'Enabled' : 'Disabled' }}</dd>
            </div>
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-2">
                <dt class="text-slate-500">Role</dt>
                <dd class="max-w-[9rem] truncate font-medium text-slate-800" title="{{ $roleLabel }}">{{ $roleLabel }}</dd>
            </div>
            <div class="flex items-center justify-between gap-2">
                <dt class="text-slate-500">Capabilities</dt>
                <dd>
                    @if ($canViewStaffAccessMatrix ?? false)
                        <button type="button" @click="setTab('security')" class="font-semibold text-teal-700 hover:underline">{{ count($effectivePermissions ?? []) }}</button>
                    @else
                        <span class="font-medium text-slate-800">{{ count($effectivePermissions ?? []) }}</span>
                    @endif
                </dd>
            </div>
        </dl>
    </x-loan.staff360-ui-card>
    </div>
</aside>