@php
    $nodeLabel = $item->label ?: ($item->label_key ? __($item->label_key) : ($item->type === 'section' ? __('ui.admin_navigation_type_section') : $item->key));
    $nodeChildren = $children->get((string) $item->id, collect());
    $editablePayload = [
        'id' => $item->id,
        'parent_id' => $item->parent_id,
        'type' => $item->type,
        'key' => $item->key,
        'label_key' => $item->label_key,
        'label' => $item->label,
        'icon' => $item->icon,
        'route_name' => $item->route_name,
        'url' => $item->url,
        'access' => $item->access,
        'is_enabled' => $item->is_enabled,
        'desktop_visible' => $item->desktop_visible,
        'mobile_visible' => $item->mobile_visible,
        'pinnable' => $item->pinnable,
        'wide' => $item->wide,
        'open_new_tab' => $item->open_new_tab,
        'active_patterns' => implode(', ', (array) data_get($item->options, 'active', [])),
    ];
@endphp

<article
    class="admin-nav-node is-{{ $item->type }} {{ $item->is_enabled ? '' : 'is-disabled' }}"
    data-nav-tree-item
    data-nav-item-id="{{ $item->id }}"
    data-nav-item-type="{{ $item->type }}"
    draggable="true"
>
    <div class="admin-nav-node-row">
        <button type="button" class="admin-nav-drag" data-nav-drag-handle aria-label="{{ __('ui.admin_navigation_drag') }}" title="{{ __('ui.admin_navigation_drag') }}">⋮⋮</button>
        <span class="admin-nav-node-icon"><x-nav-icon :name="$item->icon ?: 'menu'" /></span>
        <div class="admin-nav-node-copy">
            <strong>{{ $nodeLabel }}</strong>
            <span>
                {{ __('ui.admin_navigation_type_'.$item->type) }}
                @if($item->route_name)
                    · <code>{{ $item->route_name }}</code>
                @elseif($item->url)
                    · <code>{{ \Illuminate\Support\Str::limit($item->url, 42) }}</code>
                @endif
            </span>
        </div>
        <div class="admin-nav-node-badges">
            @if(!$item->is_enabled)<span>{{ __('ui.admin_navigation_disabled') }}</span>@endif
            @if($item->access !== 'all')<span>{{ $item->access }}</span>@endif
            @if($item->desktop_visible)<span>Desktop</span>@endif
            @if($item->mobile_visible)<span>Mobile</span>@endif
        </div>
        <div class="admin-nav-node-actions">
            <button
                type="button"
                class="button button-small"
                data-nav-edit
                data-nav-item="{{ json_encode($editablePayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) }}"
            >{{ __('ui.edit') }}</button>
            <form method="post" action="{{ route('admin.navigation.destroy', $item) }}" onsubmit="return confirm(@js(__('ui.admin_navigation_delete_confirm')))">
                @csrf
                @method('DELETE')
                <button type="submit" class="button button-small button-danger">{{ __('ui.delete') }}</button>
            </form>
        </div>
    </div>

    @if(in_array($item->type, ['category', 'section'], true))
        <div
            class="admin-nav-dropzone is-child"
            data-nav-dropzone
            data-parent-id="{{ $item->id }}"
            data-accept="{{ $item->type === 'category' ? 'section,link' : 'link' }}"
        >
            @foreach($nodeChildren as $child)
                @include('admin.navigation._tree_item', ['item' => $child, 'children' => $children, 'availableIcons' => $availableIcons])
            @endforeach
            <div class="admin-nav-drop-placeholder">{{ $item->type === 'category' ? __('ui.admin_navigation_drop_category') : __('ui.admin_navigation_drop_section') }}</div>
        </div>
    @endif
</article>