s5l.ru-crm/app/pages/Admin/Products/index.pug

div(class="admin-products")
  div(class="admin-products__header")
    h1(class="admin-products__title") Управление товарами
    div(class="admin-products__actions")
      button(
        @click="showProductModal = true"
        class="admin-products__btn admin-products__btn--primary"
      ) Добавить товар
      button(
        @click="showImportModal = true"
        class="admin-products__btn admin-products__btn--secondary"
      ) Импорт из CSV
  
  div(class="admin-products__content")
    div(class="admin-products__filters")
      div(class="admin-products__filter-group")
        label(class="admin-products__label") Поиск
        input(
          v-model="searchQuery"
          type="text"
          class="admin-products__input"
          placeholder="Название или артикул..."
        )
      
      div(class="admin-products__filter-group")
        label(class="admin-products__label") Категория
        select(v-model="selectedCategory" class="admin-products__select")
          option(value="") Все категории
          option(
            v-for="category in categories"
            :key="category._id"
            :value="category._id"
          ) {{ category.name }}
      
      div(class="admin-products__filter-group")
        label(class="admin-products__label") Статус
        select(v-model="selectedStatus" class="admin-products__select")
          option(value="") Все
          option(value="active") Активные
          option(value="inactive") Неактивные
    
    div(class="admin-products__list")
      div(class="admin-products__table-container")
        table(class="admin-products__table")
          thead
            tr
              th(class="admin-products__th") Изобр.
              th(class="admin-products__th") Название
              th(class="admin-products__th") Артикул
              th(class="admin-products__th") Цена
              th(class="admin-products__th") Категория
              th(class="admin-products__th") Статус
              th(class="admin-products__th") Действия
          tbody
            tr(
              v-for="product in filteredProducts"
              :key="product._id"
              class="admin-products__tr"
            )
              td(class="admin-products__td")
                img(
                  v-if="product.image"
                  :src="product.image"
                  :alt="product.name"
                  class="admin-products__image"
                )
                div(v-else class="admin-products__no-image") Нет
              td(class="admin-products__td")
                div(class="admin-products__name") {{ product.name }}
              td(class="admin-products__td") {{ product.sku }}
              td(class="admin-products__td")
                div(class="admin-products__price") {{ formatPrice(product.price) }}
                div(
                  v-if="product.oldPrice"
                  class="admin-products__old-price"
                ) {{ formatPrice(product.oldPrice) }}
              td(class="admin-products__td") {{ getCategoryName(product.category) }}
              td(class="admin-products__td")
                span(
                  :class="getStatusClass(product.active)"
                ) {{ product.active ? 'Активен' : 'Неактивен' }}
              td(class="admin-products__td")
                div(class="admin-products__action-buttons")
                  button(
                    @click="editProduct(product)"
                    class="admin-products__action-btn admin-products__action-btn--edit"
                  ) Редакт.
                  button(
                    @click="toggleProductStatus(product)"
                    class="admin-products__action-btn admin-products__action-btn--toggle"
                  ) {{ product.active ? 'Выкл.' : 'Вкл.' }}
                  button(
                    @click="deleteProduct(product._id)"
                    class="admin-products__action-btn admin-products__action-btn--delete"
                  ) Удалить
  
  // Модальное окно товара
  div(v-if="showProductModal" class="admin-products__modal")
    div(class="admin-products__modal-content")
      h3(class="admin-products__modal-title") {{ editingProduct ? 'Редактирование' : 'Добавление' }} товара
      // Форма будет реализована в следующем шаге
  
  // Модальное окно импорта
  div(v-if="showImportModal" class="admin-products__modal")
    div(class="admin-products__modal-content")
      h3(class="admin-products__modal-title") Импорт товаров из CSV
      
      div(class="admin-products__import-form")
        div(class="admin-products__form-group")
          label(class="admin-products__label") Выберите CSV файл
          input(
            type="file"
            @change="onFileSelect"
            accept=".csv"
            class="admin-products__file-input"
          )
        
        div(v-if="selectedFile" class="admin-products__file-info")
          p Выбран файл: {{ selectedFile.name }}
          button(
            @click="importProducts"
            :disabled="importing"
            class="admin-products__btn admin-products__btn--primary"
          ) {{ importing ? 'Импорт...' : 'Начать импорт' }}
        
        div(v-if="importResults" class="admin-products__import-results")
          h4(v-if="importResults.success" class="admin-products__success") Импорт успешно завершен!
          h4(v-else class="admin-products__error") Ошибка импорта
          p Обработано товаров: {{ importResults.processed }}
          p(v-if="importResults.error") Ошибка: {{ importResults.error }}
      
      div(class="admin-products__modal-actions")
        button(
          @click="showImportModal = false"
          class="admin-products__btn admin-products__btn--secondary"
        ) Закрыть