@foreach($nodes as $node)
    <li class="list-group-item d-flex justify-content-between align-items-center" style="padding-{{ in_array(app()->getLocale(), ['ar']) ? 'right' : 'left' }}: {{ ($depth ?? 0) * 24 + 12 }}px">
        <span>
            @if(($depth ?? 0) > 0)<i class="fas fa-arrow-{{ in_array(app()->getLocale(), ['ar']) ? 'left' : 'right' }} text-muted"></i>@endif
            @if(! empty($node['image']))
                <img src="{{ asset('storage/'.$node['image']) }}" style="width:24px;height:24px;object-fit:cover;" class="rounded mx-1">
            @else
                <i class="fas fa-folder text-warning mx-1"></i>
            @endif
            <strong>{{ $node['name_ar'] }}</strong>
            @if(! empty($node['name_en']))<small class="text-muted">— {{ $node['name_en'] }}</small>@endif
            <span class="badge badge-{{ $node['status'] === 'active' ? 'success' : 'secondary' }} mx-2">
                {{ $node['status'] === 'active' ? __('admin.active') : __('admin.inactive') }}
            </span>
        </span>
        <span class="text-muted small">#{{ $node['id'] }}</span>
    </li>
    @if(! empty($node['children']))
        @include('admin.categories._tree_node', ['nodes' => $node['children'], 'depth' => ($depth ?? 0) + 1])
    @endif
@endforeach