@php
    $children = $item->children ?? collect();
    $hasChildren = $children->count() > 0;
@endphp

<div class="menu-item level-{{ $level }}" data-item-id="{{ $item->id }}">
    <div class="menu-item-header">
        <div class="d-flex align-items-center flex-grow-1">
            <span class="menu-item-handle">
                <i class="bi bi-grip-vertical"></i>
            </span>
            <div class="menu-item-content">
                <h6 class="mb-1">{{ $item->title }}</h6>
                <div class="menu-item-meta">
                    @if ($item->type === 'page' && $item->page)
                        <span class="badge bg-success">PAGE</span>
                        <span class="text-muted ms-1 small">{{ $item->page->title }}</span>
                    @else
                        <span class="badge bg-primary">URL</span>
                        <small class="text-muted ms-1">{{ $item->url }}</small>
                    @endif
                    @if($item->target == '_blank')
                        <span class="badge bg-info ms-2">New Window</span>
                    @endif
                    @if($hasChildren)
                        <span class="badge bg-secondary ms-2">{{ $children->count() }} sub-items</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="menu-item-actions">
            <button type="button" class="btn btn-sm btn-outline-primary"
                    onclick="editMenuItem({{ $item->id }}, '{{ addslashes($item->title) }}', '{{ $item->type }}', '{{ $item->url ?? '' }}', '{{ $item->page_id ?? '' }}', '{{ $item->target }}')">
                <i class="bi bi-pencil"></i>
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger"
                    onclick="deleteMenuItem({{ $item->id }})">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    </div>

    @if($hasChildren)
        <div class="menu-children">
            @foreach($children as $child)
                @include('menus.partials.menu-item', ['item' => $child, 'level' => $level + 1])
            @endforeach
        </div>
    @endif
</div>