<template>
  <PrimeCard class="w-2/5">
    <template #content>
      <form class="flex flex-col gap-3" @submit.prevent="submit">
        <PrimeFloatLabel variant="on">
          <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
          <label for="username">Username</label>
        </PrimeFloatLabel>

        <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!localUsername" type="submit" />
      </form>
    </template>
  </PrimeCard>
</template>

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

const { username } = usePreferences()

const localUsername = ref<typeof username.value>()

async function submit() {
  if (!localUsername.value)
    return

  username.value = localUsername.value

  await navigateTo('/')
}
</script>
