div(class="media-page")
  h1 Медиа-менеджер
  
  div(class="media-toolbar")
    div(class="media-upload-area")
      file-upload(
        accept="image/*,.pdf,.doc,.docx"
        :multiple="true"
        @select="onFilesSelect"
        @upload="uploadFiles"
      )
    
    div(class="media-filters")
      select(v-model="filterType" class="filter-select")
        option(value="") Все типы
        option(value="image") Изображения
        option(value="document") Документы
      input(
        type="text"
        v-model="searchQuery"
        placeholder="Поиск по названию..."
        class="search-input"
      )

  div(class="media-content")
    div(v-if="uploading" class="upload-progress")
      div(class="progress-bar")
        div(
          class="progress-fill"
          :style="{ width: uploadProgress + '%' }"
        )
      span {{ uploadProgress }}%

    div(class="media-grid")
      div(
        v-for="file in filteredFiles"
        :key="file._id"
        class="media-item"
        :class="{ 'media-item--selected': selectedFiles.includes(file._id) }"
        @click="toggleSelect(file._id)"
      )
        div(class="media-item__preview")
          img(
            v-if="file.type === 'image'"
            :src="getFileUrl(file)"
            :alt="file.name"
            class="media-item__image"
          )
          div(v-else class="media-item__icon") 📄
        
        div(class="media-item__info")
          div(class="media-item__name") {{ file.name }}
          div(class="media-item__meta")
            span {{ formatFileSize(file.size) }}
            span {{ formatDate(file.createdAt) }}
        
        div(class="media-item__actions")
          button(
            @click.stop="deleteFile(file)"
            class="media-item__delete"
            title="Удалить файл"
          ) ×

  div(v-if="selectedFiles.length > 0" class="media-selection")
    span Выбрано: {{ selectedFiles.length }}
    ui-button(@click="deleteSelected" type="danger" size="small") Удалить выбранные