<template>
    <UCard variant="subtle">
      <template #header>
        <div class="text-center">
          <UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
          <h1 class="text-3xl font-bold text-gray-900 mb-2">
            Welcome
          </h1>
          <p class="text-gray-600">
            You will be redirected to Keycloak to authenticate
          </p>
        </div>
      </template>

      <div class="text-center">
        <UButton
          color="primary"
          size="xl"
          icon="i-lucide-log-in"
          @click="handleSignIn"
        >
          Sign in with Keycloak
        </UButton>
      </div>

      <template #footer>
        <div class="text-center text-xs text-gray-500">
          By signing in, you agree to our terms of service
        </div>
      </template>
    </UCard>
</template>

<script setup lang="ts">
definePageMeta({ auth: false, layout: 'auth' })

useSeoMeta({ title: 'Login' })

function handleSignIn() {
  navigateTo('/auth/keycloak', { external: true })
}
</script>
