<script setup lang="ts">
import { useQuasar } from 'quasar'

const quasar = useQuasar()

console.log(quasar.screen)

useHead({
  titleTemplate: (chunk) => {
    return !chunk || chunk === 'Enderman' ? 'Enderman' : `${chunk} – Enderman`
  },
})

// animate__animated-sm animate__delay-1-5s animate__fadeInDown
</script>

<template>
  <NuxtLoadingIndicator color="purple" />
  <div
    id="ender-layout"
    class="d-flex flex-column align-items-center pt-sm-5 h-100"
  >
    <NuxtLayout name="card">
      <template #footer>
        <ClientOnly>
          <template #fallback> </template>
          <Transition
            appear
            enter-active-class="animate__animated animate__delay-1s animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut"
            mode="out-in"
          >
            <Flooter
              v-if="
                quasar.screen.width && quasar.screen.height && quasar.screen.xs
              "
              opaque
            />
          </Transition>
        </ClientOnly>
      </template>
    </NuxtLayout>
  </div>

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

  <Transition
    appear
    enter-active-class="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
    leave-active-class="animate__animated animate__fadeOutDown"
    mode="out-in"
  >
    <Flooter
      v-if="quasar.screen.width && quasar.screen.height && !quasar.screen.xs"
      class="floaty mb-2 px-2"
    />
  </Transition>
</template>

<style></style>
