<script setup lang="ts">
import 'iconify-icon'

const config = useAppConfig()
const route = useRoute()

const { reader, animate } = storeToRefs(usePageStore())

useHead({
  titleTemplate: (chunk?) => {
    if (route.fullPath === '/') return config.title.full
    if (route.fullPath.split('/').length === 2)
      switch (route.fullPath.split('/')[1]) {
        case 'blog':
          return 'The Ender Chest'
        default:
          return `${chunk} – ${config.title.short}`
      }

    return chunk!
  },
})
</script>

<template>
  <div
    id="ender-layout"
    class="flex flex-col lm:justify-center lt:justify-center items-center h-full"
  >
    <ClientOnly>
      <LazySwipeControls v-if="!reader" class="block sm:hidden" />
    </ClientOnly>

    <NuxtLayout name="card">
      <template #footer>
        <footer
          v-if="!reader"
          class="lm:static sm:fixed sm:bottom-0 sm:left-0 sm:right-0 mx-auto w-auto lm:mb-0 sm:mb-2 pass-through text-center"
        >
          <small
            class="lm:text-inherit sm:accent-text sm:drop-shadow-lg sm:transition-all lm:opacity-100 sm:opacity-25 sm:hover:opacity-100"
          >
            © 2018-{{ new Date().getFullYear() }},
            <a class="sm:link-dark" :href="config.url">Enderman</a>. All rights
            reserved.
            <wbr />
            <sub class="whitespace-nowrap">
              β{{ config.build.version ? config.build.version : '?.?.?' }} ({{
                config.build.date ? config.build.date : '1970-01-01'
              }})
            </sub>
          </small>
        </footer>
      </template>
    </NuxtLayout>
  </div>

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