<template>
  <v-container fluid class="pa-6">
    <FilesToolbar />
    <FilesPermissionAlert />
    <FilesStatusBar />
    <FilesBreadcrumb />
    <FilesList />
    <FilesDialogs />
    <FileEditorWorkbench
      ref="editorWorkbench"
      :server-id="selectedServer ?? 0"
      :current-path="currentPath"
      @saved="page.onEditorSaved($event)"
      @path-change="page.navigateToPath"
      @paste-target="page.pasteClipboard"
    />
  </v-container>
</template>

<script setup lang="ts">
import FilesBreadcrumb from '@/components/files/FilesBreadcrumb.vue'
import FileEditorWorkbench from '@/components/FileEditorWorkbench.vue'
import FilesDialogs from '@/components/files/FilesDialogs.vue'
import FilesList from '@/components/files/FilesList.vue'
import FilesPermissionAlert from '@/components/files/FilesPermissionAlert.vue'
import FilesStatusBar from '@/components/files/FilesStatusBar.vue'
import FilesToolbar from '@/components/files/FilesToolbar.vue'
import { storeToRefs } from 'pinia'
import { provideFilesPage } from '@/composables/files/filesPageContext'
import { useFilesPage } from '@/composables/files/useFilesPage'
import { useFilesStore } from '@/stores/files'

const page = useFilesPage()
provideFilesPage(page)

const { editorWorkbench } = page
const { selectedServer, currentPath } = storeToRefs(useFilesStore())
</script>
