div(
  class="category-node"
  :class="{  'category-node--expanded': isExpanded, 'category-node--dragging': isDragging,'category-node--drag-over': isDragOver}"
  :style="{ paddingLeft: (level * 20) + 'px' }"
  draggable="true"
  @dragstart="onDragStart"
  @dragend="onDragEnd"
  @dragover="onDragOver"
  @dragenter="onDragEnter"
  @dragleave="onDragLeave"
  @drop="onDrop"
)
  div(class="category-node__header")
    button(
      v-if="hasChildren"
      @click="toggleExpanded"
      class="category-node__toggle"
      :title="isExpanded ? 'Свернуть' : 'Развернуть'"
    ) {{ isExpanded ? '−' : '+' }}
    span(v-else class="category-node__spacer") •
    
    span(class="category-node__name") {{ category.name }}
    
    span(class="category-node__badge") {{ category.children ? category.children.length : 0 }}
    
    div(class="category-node__actions")
      ui-button(
        @click="$emit('edit', category)"
        size="small"
        type="outline"
      ) ✏️
      ui-button(
        @click="$emit('delete', category)"
        size="small"
        type="danger"
      ) 🗑️
  
  div(v-if="isExpanded && hasChildren" class="category-node__children")
    category-node(
      v-for="child in category.children"
      :key="child._id"
      :category="child"
      :level="level + 1"
      @edit="$emit('edit', $event)"
      @delete="$emit('delete', $event)"
      @move="$emit('move', $event)"
    )
  
  div(v-if="isDragOver" class="category-node__drop-indicator")