<script setup lang="ts">
import Logo from '@/components/common/Logo.vue'
</script>

<template>
  <UApp>
    <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-primary-50 to-primary-100 dark:from-gray-900 dark:to-gray-800 p-4">
      <div class="w-full max-w-md">
        <UPageCard :ui="{ wrapper: 'flex flex-col flex-1 items-center', header: 'mb-4' }">
          <template #header>
            <slot name="logo">
              <Logo />
            </slot>
          </template>

          <slot />
        </UPageCard>
      </div>
    </div>
  </UApp>
</template>
