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

div(class="admin-slider")
  div(class="admin-slider__header")
    h1(class="admin-slider__title") Управление слайдером
    button(
      @click="showSlideModal = true"
      class="admin-slider__add-btn"
    ) Добавить слайд
  
  div(class="admin-slider__content")
    div(class="admin-slider__list")
      div(
        v-for="(slide, index) in slides"
        :key="slide._id"
        class="admin-slider__item"
      )
        div(class="admin-slider__item-preview")
          img(
            v-if="slide.image"
            :src="slide.image"
            :alt="slide.title"
            class="admin-slider__item-image"
          )
          div(v-else class="admin-slider__item-placeholder") Нет изображения
          div(class="admin-slider__item-info")
            h3(class="admin-slider__item-title") {{ slide.title || 'Без названия' }}
            p(class="admin-slider__item-subtitle") {{ slide.subtitle || 'Без описания' }}
            div(class="admin-slider__item-meta")
              span(class="admin-slider__item-order") Порядок: {{ slide.order }}
              span(
                :class="getStatusClass(slide.active)"
              ) {{ slide.active ? 'Активен' : 'Неактивен' }}
        
        div(class="admin-slider__item-actions")
          button(
            @click="editSlide(slide)"
            class="admin-slider__btn admin-slider__btn--edit"
          ) Редактировать
          button(
            @click="toggleSlideStatus(slide)"
            :class="getToggleBtnClass(slide.active)"
          ) {{ slide.active ? 'Деактивировать' : 'Активировать' }}
          button(
            @click="deleteSlide(slide._id)"
            class="admin-slider__btn admin-slider__btn--delete"
          ) Удалить
  
  // Модальное окно редактирования слайда
  div(v-if="showSlideModal" class="admin-slider__modal")
    div(class="admin-slider__modal-content")
      h3(class="admin-slider__modal-title") {{ editingSlide ? 'Редактирование' : 'Добавление' }} слайда
      
      div(class="admin-slider__modal-form")
        div(class="admin-slider__form-group")
          label(class="admin-slider__label") Заголовок
          input(
            v-model="slideForm.title"
            type="text"
            class="admin-slider__input"
            placeholder="Введите заголовок слайда"
          )
        
        div(class="admin-slider__form-group")
          label(class="admin-slider__label") Подзаголовок
          textarea(
            v-model="slideForm.subtitle"
            class="admin-slider__textarea"
            placeholder="Введите описание слайда"
            rows="3"
          )
        
        div(class="admin-slider__form-group")
          label(class="admin-slider__label") Ссылка на изображение
          input(
            v-model="slideForm.image"
            type="text"
            class="admin-slider__input"
            placeholder="https://example.com/image.jpg"
          )
        
        div(class="admin-slider__form-group")
          label(class="admin-slider__label") Текст кнопки
          input(
            v-model="slideForm.buttonText"
            type="text"
            class="admin-slider__input"
            placeholder="В каталог"
          )
        
        div(class="admin-slider__form-group")
          label(class="admin-slider__label") Ссылка кнопки
          input(
            v-model="slideForm.buttonLink"
            type="text"
            class="admin-slider__input"
            placeholder="/catalog"
          )
        
        div(class="admin-slider__form-group")
          label(class="admin-slider__label") Порядок
          input(
            v-model="slideForm.order"
            type="number"
            class="admin-slider__input"
            min="0"
          )
        
        div(class="admin-slider__form-group")
          label(class="admin-slider__checkbox-label")
            input(
              v-model="slideForm.active"
              type="checkbox"
              class="admin-slider__checkbox"
            )
            span Активный слайд
        
        div(class="admin-slider__form-group")
          label(class="admin-slider__label") Домены
          div(class="admin-slider__domains-list")
            label(
              v-for="domain in availableDomains"
              :key="domain._id"
              class="admin-slider__domain-label"
            )
              input(
                type="checkbox"
                :value="domain.domain"
                v-model="slideForm.domains"
                class="admin-slider__domain-checkbox"
              )
              span {{ domain.domain }}
      
      div(class="admin-slider__modal-actions")
        button(
          @click="saveSlide"
          class="admin-slider__btn admin-slider__btn--primary"
        ) {{ editingSlide ? 'Обновить' : 'Добавить' }}
        button(
          @click="showSlideModal = false"
          class="admin-slider__btn admin-slider__btn--secondary"
        ) Отмена