<template>
  <div
    class="flex justify-center"
    style="height: 100vh"
    >
    <q-layout container style="max-width: 800px !important">
      <q-page-container>
        <q-page class="flex w100 column">
          <div >
            <div
              class="main-content flex items-center column w100 q-px-lg q-pb-xl"
              >
              <base-logo
                class="q-pa-md text-h4 cursor-pointer"
                @click="router.push({ name: 'main' })"  
              />
              <markdown-viewver
                v-if="documentName"
                :locale
                :documentName
              />
            </div>
          </div>
          <q-page-scroller position="bottom-right" :scroll-offset="300" :offset="[18, 18]">
            <q-btn fab icon="mdi-arrow-up" color="primary"/>
          </q-page-scroller>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import BaseLogo from 'components/BaseLogo.vue'
  import MarkdownViewver from 'components/MarkdownViewver.vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { docs } from 'src/docs'
  
  const { locale } = useI18n({ useScope: 'global' })
  const route = useRoute()
  const router = useRouter()
  const documentName = ref(null)

  onMounted(() => {
    const doc = docs.find(d => d.route === route.name)
    if (doc) {
      documentName.value = doc.file
    } else {
      router.replace('/404')
    }
  })

</script>
