<div class="category-item border border-gray-200 rounded-lg bg-white" data-id="{{ $category->id }}">
    <div class="flex items-center justify-between px-4 py-3 hover:bg-gray-50">
        <div class="flex items-center gap-3 flex-1">
            <!-- 드래그 핸들 -->
            <div class="drag-handle cursor-move text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
                </svg>
            </div>

            <!-- 들여쓰기 -->
            @if($depth > 0)
                <div style="width: {{ $depth * 24 }}px"></div>
            @endif

            <!-- 펼침/접힘 버튼 -->
            @if($category->childrenRecursive->count() > 0)
                <button type="button" onclick="toggleChildren(this)" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            @else
                <div class="w-4"></div>
            @endif

            <!-- 카테고리 정보 -->
            <div class="flex items-center gap-2 flex-1">
                <span class="font-medium text-gray-800">{{ $category->name }}</span>
                <span class="text-sm text-gray-500">({{ $category->code }})</span>
                @if($category->description)
                    <span class="text-sm text-gray-400 hidden sm:inline">- {{ Str::limit($category->description, 30) }}</span>
                @endif
            </div>
        </div>

        <div class="flex items-center gap-2">
            <!-- 활성 토글 -->
            <button type="button" onclick="toggleCategory({{ $category->id }}, this)"
                    class="relative inline-flex h-6 w-10 items-center rounded-full transition {{ $category->is_active ? 'bg-blue-500' : 'bg-gray-400' }}">
                <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition {{ $category->is_active ? 'translate-x-4' : 'translate-x-0.5' }}"></span>
            </button>

            <!-- 하위 카테고리 추가 -->
            <button type="button" onclick="addChildCategory({{ $category->id }})"
                    class="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition"
                    title="하위 카테고리 추가">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </button>

            <!-- 수정 -->
            <button type="button" onclick="openEditModal({{ $category->id }})"
                    class="p-1.5 text-gray-400 hover:text-yellow-600 hover:bg-yellow-50 rounded transition"
                    title="수정">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
            </button>

            <!-- 삭제 -->
            <button type="button" onclick="deleteCategory({{ $category->id }}, '{{ $category->name }}')"
                    class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition"
                    title="삭제">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
            </button>
        </div>
    </div>

    <!-- 하위 카테고리 -->
    @if($category->childrenRecursive->count() > 0)
        <div class="children-container pl-4 pb-2 space-y-2" id="sortable-{{ $category->id }}">
            @foreach($category->childrenRecursive as $child)
                @include('categories.partials.tree-item', ['category' => $child, 'depth' => $depth + 1])
            @endforeach
        </div>
    @endif
</div>