{{-- 테넌트 모달 - 메뉴 탭 --}}
<div class="space-y-4">
    {{-- 헤더 --}}
    <div class="flex items-center justify-between">
        <h3 class="text-sm font-medium text-gray-700">메뉴 목록</h3>
        <span class="text-xs text-gray-500">총 {{ $menus->count() }}개</span>
    </div>

    @if($menus->count() > 0)
        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
            <table class="w-full">
                <thead class="bg-gray-50 border-b">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase">ID</th>
                        <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase">메뉴명</th>
                        <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase">URL</th>
                        <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase">정렬</th>
                        <th class="px-4 py-2 text-center text-xs font-semibold text-gray-700 uppercase">활성</th>
                        <th class="px-4 py-2 text-center text-xs font-semibold text-gray-700 uppercase">숨김</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($menus as $menu)
                        <tr class="hover:bg-gray-50 modal-menu-row"
                            data-menu-id="{{ $menu->id }}"
                            data-parent-id="{{ $menu->parent_id ?? '' }}"
                            data-depth="{{ $menu->depth ?? 0 }}">
                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
                                {{ $menu->id }}
                            </td>
                            <td class="px-4 py-2 whitespace-nowrap">
                                <div class="flex items-center gap-2" style="padding-left: {{ (($menu->depth ?? 0) * 1.5) }}rem;">
                                    {{-- 트리 구조 표시 --}}
                                    @if(($menu->depth ?? 0) > 0)
                                        <span class="text-gray-300 text-xs font-mono flex-shrink-0">└─</span>
                                    @endif

                                    {{-- 폴더/아이템 아이콘 --}}
                                    @if($menu->has_children ?? false)
                                        <button type="button"
                                                onclick="toggleModalMenuChildren({{ $menu->id }})"
                                                class="modal-menu-toggle flex items-center text-blue-500 hover:text-blue-700 focus:outline-none"
                                                data-menu-id="{{ $menu->id }}">
                                            <svg class="w-4 h-4 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 items-center gap-2">
                                        <span class="text-sm {{ ($menu->depth ?? 0) === 0 ? 'font-semibold text-gray-900' : 'font-medium text-gray-700' }}">
                                            {{ $menu->name }}
                                        </span>
                                        @if($menu->is_external ?? false)
                                            <span class="text-xs text-blue-600">(외부)</span>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
                                @if(($menu->is_external ?? false) && $menu->external_url)
                                    <a href="{{ $menu->external_url }}" target="_blank" class="text-blue-600 hover:underline">
                                        {{ Str::limit($menu->external_url, 25) }}
                                    </a>
                                @elseif($menu->url)
                                    {{ Str::limit($menu->url, 25) }}
                                @else
                                    -
                                @endif
                            </td>
                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
                                {{ $menu->sort_order ?? 0 }}
                            </td>
                            <td class="px-4 py-2 whitespace-nowrap text-center">
                                {{-- 활성 상태 표시 (액션 없음) --}}
                                <span class="relative inline-flex h-4 w-8 items-center rounded-full {{ $menu->is_active ? 'bg-blue-500' : 'bg-gray-300' }}">
                                    <span class="inline-block h-3 w-3 transform rounded-full bg-white shadow-sm {{ $menu->is_active ? 'translate-x-4' : 'translate-x-0.5' }}"></span>
                                </span>
                            </td>
                            <td class="px-4 py-2 whitespace-nowrap text-center">
                                {{-- 숨김 상태 표시 (액션 없음) --}}
                                <span class="relative inline-flex h-4 w-8 items-center rounded-full {{ $menu->hidden ? 'bg-amber-500' : 'bg-gray-300' }}">
                                    <span class="inline-block h-3 w-3 transform rounded-full bg-white shadow-sm {{ $menu->hidden ? 'translate-x-4' : 'translate-x-0.5' }}"></span>
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        {{-- 빈 상태 --}}
        <div class="text-center py-8 text-gray-500">
            <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <p>등록된 메뉴가 없습니다.</p>
        </div>
    @endif
</div>
