// app/pages/Admin/Routes/index.pug
div
  .flex.justify-between.items-center.mb-6
    h1(class="text-2xl font-bold text-gray-900 dark:text-white") Управление маршрутами
    button(
      @click="showRouteModal = true"
      class="bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors"
    ) + Новый маршрут
  
  .bg-white.dark_bg-gray-800.rounded-lg.shadow.overflow-hidden
    table(class="min-w-full divide-y divide-gray-200 dark:divide-gray-700")
      thead(class="bg-gray-50 dark:bg-gray-700")
        tr
          th(class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider") Путь
          th(class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider") Компонент
          th(class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider") Название
          th(class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider") Статус
          th(class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider") Действия
      tbody(class="divide-y divide-gray-200 dark:divide-gray-700")
        tr(v-for="route in routes" :key="route._id")
          td(class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900 dark:text-white") {{ route.path }}
          td(class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300") {{ route.component }}
          td(class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300") {{ route.name }}
          td(class="px-6 py-4 whitespace-nowrap")
            span(
              :class="getRouteStatusClass(route.active)"
            ) {{ route.active ? 'Активен' : 'Неактивен' }}
          td(class="px-6 py-4 whitespace-nowrap text-sm font-medium")
            button(
              @click="editRoute(route)"
              class="text-blue-600 hover:text-blue-900 mr-3"
            ) Редактировать
            button(
              @click="deleteRoute(route._id)"
              class="text-red-600 hover:text-red-900"
            ) Удалить

  // Модальное окно маршрута
  modalwindow(
    v-if="showRouteModal"
    @close="showRouteModal = false"
    :title="currentRoute._id ? 'Редактирование маршрута' : 'Новый маршрут'"
  )
    .space-y-4
      .grid.grid-cols-2.gap-4
        div
          label(class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1") Путь
          input(
            v-model="currentRoute.path"
            type="text"
            placeholder="/about"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600"
          )
        div
          label(class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1") Название
          input(
            v-model="currentRoute.name"
            type="text"
            placeholder="about"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600"
          )
      .grid.grid-cols-1.gap-4
        label(class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1") Компонент
        select(
          v-model="currentRoute.component"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600"
        )
          option(value="") Выберите компонент
          option(value="About") About
          option(value="Contacts") Contacts
          option(value="BlogArticle") BlogArticle
          option(value="CustomPage") CustomPage
      .grid.grid-cols-2.gap-4
        div
          label(class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1") Мета-заголовок
          input(
            v-model="currentRoute.metaTitle"
            type="text"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600"
          )
        div
          label(class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1") Мета-описание
          input(
            v-model="currentRoute.metaDescription"
            type="text"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600"
          )
      .flex.items-center
        input(
          v-model="currentRoute.active"
          type="checkbox"
          id="routeActive"
          class="w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
        )
        label(for="routeActive" class="ml-2 text-sm text-gray-700 dark:text-gray-300") Активный маршрут
      .flex.justify-end.space-x-3
        button(
          @click="showRouteModal = false"
          class="px-4 py-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
        ) Отмена
        button(
          @click="saveRoute"
          class="bg-primary-500 text-white px-4 py-2 rounded hover:bg-primary-600 transition-colors"
        ) {{ currentRoute._id ? 'Обновить' : 'Сохранить' }}