<script lang="ts" setup>

import { useDisplay } from 'vuetify'

const { mobile } = useDisplay()
export interface Props {
  fluid?: boolean
  toc?: boolean
  edit?: boolean
  navDrawer?: boolean
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  fluid: false,
  toc: true,
  edit: true,
  navDrawer: true,
  title: null
});
const drawer = ref(true);

const { page } = useContent();
const scrollThreshold = ref(200)
const density = ref<'compact' | 'prominent'>("prominent")
function onScroll() {
  if (window.scrollY > scrollThreshold.value) {
    density.value = "compact"
  }
  else { density.value = "prominent" }
}
</script>

<template>
  <VApp>
    <v-main style="min-height: 300px">
      <v-container v-scroll="onScroll" :fluid="fluid">
        <v-row justify="center">
          <v-col cols="auto">
            <v-card flat color="transparent" :min-width="mobile ? undefined : 900" :max-width="fluid ? undefined : 1500">
              <v-card-text>
                <slot />
              </v-card-text>
              <EditGitlab v-if="edit" />
              <NavPrevNext v-if="edit" />
            </v-card>
          </v-col>
        </v-row>
      </v-container>
      <!-- <Footer></Footer> -->
    </v-main>
    <NavNavbar v-model:drawer="drawer" :title="title !== null ? title : undefined" :density="density"
      :drawer-enabled="navDrawer" />
    <slot v-if="navDrawer" name="drawer" :drawer="drawer">
      <NavDrawer :drawer="drawer" />
    </slot>
    <NavTableOfContent v-if="toc" :links="page.body.toc.links ?? []" />
    <nav-back-to-top />
  </VApp>
</template>

<style scoped></style>