{{-- One row in the block tree; recurses into container slots. --}}
@php
    $nodeDef = $node->definition();
    $isSelected = $selectedId === $node->id;
@endphp
<li wire:key="node-{{ $node->id }}">
    <div class="flex items-center gap-1 rounded-lg px-2 py-1.5 {{ $isSelected ? 'bg-primary-50 ring-1 ring-primary-400' : 'hover:bg-gray-50' }}"
         style="margin-inline-start: {{ $depth * 12 }}px">

        <button type="button" wire:click="select({{ $node->id }})"
                class="flex items-center gap-2 flex-1 min-w-0 text-start">
            <x-website.icon :name="$nodeDef?->icon() ?? 'x-mark'" class="w-4 h-4 shrink-0 text-gray-500" />
            <span class="truncate text-sm {{ $node->is_enabled ? '' : 'line-through opacity-50' }}">
                {{ $nodeDef?->label() ?? $node->type }}
            </span>
        </button>

        <div class="flex items-center shrink-0">
            <button type="button" wire:click="moveBlock({{ $node->id }}, -1)" class="p-1 text-gray-300 hover:text-gray-700" aria-label="{{ __('لأعلى') }}">
                <x-ui.icon name="chevron-up" class="w-3.5 h-3.5" />
            </button>
            <button type="button" wire:click="moveBlock({{ $node->id }}, 1)" class="p-1 text-gray-300 hover:text-gray-700" aria-label="{{ __('لأسفل') }}">
                <x-ui.icon name="chevron-down" class="w-3.5 h-3.5" />
            </button>
            <button type="button" wire:click="toggleBlock({{ $node->id }})" class="p-1 text-gray-300 hover:text-gray-700"
                    aria-label="{{ $node->is_enabled ? __('إخفاء') : __('إظهار') }}">
                <x-ui.icon name="eye" class="w-3.5 h-3.5" />
            </button>
        </div>
    </div>

    @if ($nodeDef?->allowsChildren())
        @foreach ($nodeDef->slots() as $slotName)
            @php $slotChildren = $node->children->where('slot', $slotName); @endphp
            @if (count($nodeDef->slots()) > 1 || $slotChildren->isNotEmpty())
                <div style="margin-inline-start: {{ ($depth + 1) * 12 }}px">
                    @if (count($nodeDef->slots()) > 1)
                        <p class="text-[10px] uppercase tracking-wider text-gray-400 px-2 pt-1">{{ $slotName }}</p>
                    @endif
                    <ul class="space-y-1">
                        @foreach ($slotChildren as $child)
                            @include('website.builder.tree-node', ['node' => $child, 'depth' => $depth + 1])
                        @endforeach
                    </ul>
                    <button type="button" wire:click="openPicker({{ $node->id }}, '{{ $slotName }}')"
                            class="mx-2 my-1 text-xs text-primary-600 hover:underline">+ {{ __('عنصر هنا') }}</button>
                </div>
            @endif
        @endforeach
    @endif
</li>
