<script setup lang="ts">
const config = useAppConfig()
const theme = useVThemeSSR()

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="d-flex flex-column align-items-center pt-sm-5 h-100"
    >
      <AClientOnly appear render="xs" mode="out-in">
        <SwipeControls />
      </AClientOnly>

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

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

    <AClientOnly
      appear
      render="sm-up"
      mode="out-in"
      enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
      leave="animate__animated animate__fadeOutDown"
    >
      <Flooter class="floaty mb-2 px-2" />
    </AClientOnly>
  </VThemeProvider>
</template>
