@forelse($menuTree as $menu)
    <div
        class="menu-item flex items-center gap-2 py-2 rounded-lg border border-transparent cursor-pointer transition-colors hover:bg-gray-50 {{ $menu->depth > 0 ? 'ml-4 border-l-2 border-gray-200' : '' }}"
        data-menu-id="{{ $menu->id }}"
        data-parent-id="{{ $menu->parent_id ?? '' }}"
        data-depth="{{ $menu->depth ?? 0 }}"
        data-menu-name="{{ $menu->name }}"
        onclick="selectMenu({{ $menu->id }}, '{{ addslashes($menu->name) }}')"
        style="padding-left: {{ ($menu->depth * 1.5) + 0.75 }}rem;"
    >
        {{-- 트리 구조 표시 --}}
        @if($menu->depth > 0)
            <span class="text-gray-300 text-xs font-mono flex-shrink-0">└─</span>
        @endif

        {{-- 폴더/아이템 아이콘 (폴더는 클릭으로 접기/펼치기) --}}
        @if($menu->has_children)
            <button type="button"
                    onclick="event.stopPropagation(); toggleChildren({{ $menu->id }})"
                    class="toggle-btn flex items-center text-blue-500 hover:text-blue-700 focus:outline-none"
                    data-menu-id="{{ $menu->id }}">
                <svg class="w-4 h-4 transform transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                </svg>
                <svg class="w-3 h-3 ml-0.5 transform transition-transform chevron-icon" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                </svg>
            </button>
        @else
            <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
        @endif

        {{-- 메뉴 정보 --}}
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
                <span class="text-sm {{ $menu->depth === 0 ? 'font-semibold text-gray-900' : 'font-medium text-gray-700' }} truncate">
                    {{ $menu->name }}
                </span>
                @if($menu->url)
                    <span class="text-xs text-gray-400 truncate hidden sm:inline">{{ $menu->url }}</span>
                @endif
            </div>
        </div>

        {{-- 메뉴 ID --}}
        <span class="text-xs text-gray-400 font-mono flex-shrink-0">ID:{{ $menu->id }}</span>
    </div>
@empty
    <div class="text-center py-8 text-gray-500">
        <p>메뉴가 없습니다.</p>
    </div>
@endforelse