<template>
  <!-- <VMain class="main d-flex align-center justify-center"> -->
  <VRow no-gutters class="main">
    <VCol cols="6" class="d-flex align-center justify-center">
      <VCard class="card" title="Login Area" width="400" rounded="lg">
        <VCardText>
          <VBtn v-for="provider in providers" :key="provider.id" @click="signIn(provider.id)" class="mb-8" color="blue"
            size="large" block>
            Sign in with {{ provider.name }}
          </VBtn>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
  <!-- </VMain> -->
</template>

<script setup>
// import { useField, useForm } from 'vee-validate'

definePageMeta({
  layout: 'auth',
  auth: {
    unauthenticatedOnly: true,
    navigateAuthenticatedTo: '/homepage',
  },
})

const { signIn, getProviders } = useAuth()
const providers = await getProviders()

// const { handleSubmit, handleReset } = useForm({
// validationSchema: {
//   username (value) {
//   if (value?.length >= 2) return true

//   return 'Name needs to be at least 2 characters.'
//   },
//   password (value) {
//   return true
//   if (value?.length > 9 && /[0-9-]+/.test(value)) return true

//   return 'Phone number needs to be at least 9 digits.'
//   },
// },
// })

// const username = useField('username')
// const password = useField('password')

// const submit = handleSubmit(values => {
// alert(JSON.stringify(values, null, 2))
// })

// const show = ref(false)
</script>

<style scoped>
.main {
  min-height: 300px;
  background-image: url('/background.jpg');
  background-size: cover;
}

.card {
  /* From https://css.glass */
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(11.1px);
  -webkit-backdrop-filter: blur(11.1px);
}
</style>
