@php
    $hasChildren = ! empty($node['children']);
    $isDeptHead = in_array($node['id'], $departmentHeadIds ?? [], true);
    $deptTone = $node['department_id'] ? (($node['department_id'] % 6) + 1) : null;
@endphp
<li class="chm-orgchart-node" data-user-id="{{ $node['id'] }}" data-depth="{{ $node['depth'] }}">
    <div
        class="chm-orgchart-card @if($isDeptHead) is-dept-head @endif @if($node['is_top_level']) is-top-level @endif @if($deptTone) dept-tone-{{ $deptTone }} @endif"
        data-user-id="{{ $node['id'] }}"
        @if($node['department_id']) data-department-id="{{ $node['department_id'] }}" @endif
        tabindex="0"
        title="{{ $node['name'] }}@if($node['email']) · {{ $node['email'] }}@endif"
    >
        @if($node['is_top_level'])
            <span class="chm-orgchart-level-badge" title="Top-level leader"><i class="bx bx-crown"></i></span>
        @endif

        <img src="{{ $node['avatar'] }}" alt="{{ $node['name'] }}" class="chm-org-avatar" loading="lazy">

        <div class="chm-orgchart-card-name">{{ $node['name'] }}</div>
        <div class="chm-orgchart-card-role">{{ $node['role'] }}</div>

        @if($node['department'])
            <div class="chm-orgchart-card-dept">{{ $node['department'] }}</div>
        @endif

        @if($node['manager_name'])
            <div class="chm-orgchart-card-manager">Reports to {{ $node['manager_name'] }}</div>
        @endif

        <div class="chm-orgchart-card-meta">
            @if($isDeptHead)
                <span class="chm-orgchart-hod-badge">HOD</span>
            @endif
            @if($hasChildren)
                <span class="chm-orgchart-badge" title="Direct reports">{{ $node['direct_reports_count'] }} reports</span>
            @endif
        </div>

        @if($canManage ?? false)
            <a href="{{ route('edit.user', $node['id']) }}" class="chm-orgchart-card-link" title="Edit user">
                <i class="bx bx-edit-alt"></i>
            </a>
        @endif

        @if($hasChildren)
            <button type="button" class="chm-orgchart-toggle" data-action="toggle-branch" aria-expanded="true" title="Collapse branch">
                <i class="bx bx-chevron-up"></i>
            </button>
        @endif
    </div>

    @if($hasChildren)
        <ul class="chm-orgchart-children">
            @foreach($node['children'] as $child)
                @include('admin.administration.org_chart.partials.chart-node', [
                    'node' => $child,
                    'departmentHeadIds' => $departmentHeadIds ?? [],
                    'canManage' => $canManage ?? false,
                ])
            @endforeach
        </ul>
    @endif
</li>