div(
  class="category-node"
  :class="{ 'category-node--expanded': isExpanded, 'category-node--dragging': isDragging }"
  :style="{ paddingLeft: (level * 20) + 'px' }"
)
  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(v-if="category.children" class="category-node__badge") {{ category.children.length }}
    span(v-else class="category-node__badge") 0
    
    div(class="category-node__meta")
      span(v-if="category._id" class="category-node__id") {{ category._id.substring(0, 8) }}
      span(v-if="category.active === false" class="category-node__inactive") неактивна
    
    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)"
    )