<script setup lang="ts">
const config = useAppConfig()
const theme = useVThemeSSR()
const vdisp = ref(useVDisplay())
const { reader } = storeToRefs(usePageStore())

useHead({
  titleTemplate: (chunk?) => {
    return chunk === config.title.short
      ? config.title.full
      : `${chunk} – ${config.title.short}`
  },
})
</script>

<template>
  <VThemeProvider
    :theme="theme.dark.value ? config.theme.dark : config.theme.light"
  >
    <div
      id="ender-layout"
      class="p-animated d-flex flex-column align-items-center h-100"
      :class="{ 'pt-sm-5': !reader }"
    >
      <AClientOnly appear mode="out-in">
        <SwipeControls v-if="vdisp.xs" />
      </AClientOnly>

      <NuxtLayout
        name="card"
        class="animate__animated-sm animate__delay-1-5s animate__fadeInDown"
      >
        <template #footer>
          <AClientOnly
            appear
            mode="in-out"
            enter="animate__animated animate__delay-1s animate__fadeIn"
            leave="animate__animated animate__fadeOut"
          >
            <Flooter v-if="vdisp.xs" opaque />
          </AClientOnly>
        </template>
      </NuxtLayout>
    </div>

    <AClientOnly
      appear
      mode="out-in"
      enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
      leave="animate__animated animate__fadeOutDown"
    >
      <Flooter v-if="vdisp.smAndUp && !reader" class="floaty mb-2 px-2" />
    </AClientOnly>

    <ClientOnly>
      <template #fallback> </template>
      <Portal layout="#ender-layout" animate randomize fade />
    </ClientOnly>
  </VThemeProvider>
</template>
