<template>
  <div>
    <UPageHero title="Tímmál" />
    <UPageSection id="login" title="Log in to your account" description="Welcome back to your workspace">
      <div class="full-w flex justify-center">
        <div class="flex flex-1 gap-3 max-w-200 flex-col items-stretch px-4 py-3 justify-center">
          <UAlert
            v-if="error"
            title="Something went wrong!"
            description="We couldn't log you in due to an error. Try again later. If the issue persists, try contacting the website's administrator."
            color="error"
            icon="i-lucide-circle-alert"
          />
          <AuthOAuthProvider v-for="provider of providers" :key="provider.name" :provider="provider" />
        </div>
      </div>
    </UPageSection>
  </div>
</template>

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

const route = useRoute();
const redirectPath = (route.query.redirect as string) || '/dashboard';
const { authProviders, error, isAuthenticated } = useAuth();

const providers = await authProviders();

watch(isAuthenticated, (authenticated) => {
  if (authenticated) {
    navigateTo(redirectPath);
  }
});
</script>
