div(class="categories-page")
  div(class="page-header")
    h1 Управление категориями
    div(class="page-actions")
      ui-button(@click="createCategory" type="primary") ➕ Создать категорию
      ui-button(@click="expandAll" type="outline") 📂 Развернуть все
      ui-button(@click="collapseAll" type="outline") 📁 Свернуть все

  div(class="categories-content")
    div(class="categories-tree")
      h2 Древовидная структура
      div(v-if="loading" class="loading-state") Загрузка категорий...
      div(v-else class="tree-container") 
        category-node(
          v-for="category in hierarchicalCategories"
          :key="category._id"
          :category="category"
          :level="0"
          @edit="editCategory"
          @delete="deleteCategory"
          @move="moveCategory"
        )
    
    div(class="category-editor")
      h2 {{ editingCategory ? 'Редактирование категории' : 'Создание категории' }}
      div(v-if="editingCategory || creatingNew" class="editor-form")
        div(class="form-group")
          label Название категории *
          input(
            type="text"
            v-model="categoryForm.name"
            placeholder="Введите название категории"
            class="form-input"
          )
        
        div(class="form-group")
          label URL-адрес (slug)
          input(
            type="text"
            v-model="categoryForm.slug"
            placeholder="category-slug"
            class="form-input"
          )
        
        div(class="form-group")
          label Родительская категория
          select(v-model="categoryForm.parent" class="form-select")
            option(value="") Без родительской категории
            option(
              v-for="cat in flatCategories"
              :key="cat._id"
              :value="cat._id"
            ) {{ cat.name }}
        
        div(class="form-group")
          label Порядок сортировки
          input(
            type="number"
            v-model="categoryForm.order"
            class="form-input"
          )
        
        div(class="form-group")
          label Изображение категории
          media-upload(
            :current-image="categoryForm.image"
            @image-selected="onImageSelected"
            @image-removed="onImageRemoved"
          )
        
        div(class="form-group")
          label Описание категории
          textarea(
            v-model="categoryForm.description"
            placeholder="Описание категории для SEO"
            class="form-textarea"
            rows="4"
          )
        
        div(class="form-actions")
          ui-button(@click="cancelEdit" type="outline") Отмена
          ui-button(
            @click="saveCategory"
            type="primary"
            :loading="saving"
          ) {{ editingCategory ? 'Сохранить' : 'Создать' }}
      
      div(v-else class="editor-placeholder")
        p Выберите категорию для редактирования или создайте новую