<script lang="ts" setup>
import { computed } from 'vue';
import ErrorPlate from '@/components/ErrorPlate.vue';
import LogoComponent from '@/components/Icons/LogoComponent.vue';
import { useAuthStore } from '@/stores/auth';
import { useLocale, useTheme } from 'vuetify';

const { t } = useLocale();
const theme = useTheme();
const currentTheme = computed(() => theme.global.name.value);

const $auth = useAuthStore();
</script>

<template>
  <div class="flex relative flex-col items-center justify-center h-full">
    <!-- Card -->
    <v-card width="800px" class="p-12 rounded-3xl" elevation="0">
      <!-- Logo -->
      <LogoComponent :theme="currentTheme" />
      <div class="grid grid-cols-5 mt-8">
        <!-- Left side -->
        <div class="items-start flex flex-col col-span-2">
          <span class="text-3xl font-medium">{{
            t('$vuetify.auth.title')
          }}</span>
          <!-- Copyright -->
          <span class="text-sm mt-2 opacity-75">{{
            t('$vuetify.auth.copyright')
          }}</span>
        </div>
        <!-- Right side -->
        <div class="flex flex-col col-span-3">
          <!-- Login -->
          <v-text-field
            v-model="$auth.form.email"
            :label="t('$vuetify.auth.email')"
            :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
            flat
            hide-details
            rounded
            density="comfortable"
          />
          <!-- Password -->
          <v-text-field
            v-model="$auth.form.password"
            :label="t('$vuetify.auth.password')"
            :variant="currentTheme === 'dark' ? 'solo-filled' : 'outlined'"
            hide-details
            flat
            rounded
            density="comfortable"
            class="mt-2"
          />
          <!-- Error -->
          <ErrorPlate :error="$auth.err" no-border />
          <!-- Help -->
          <span class="mt-5 flex items-center gap-1"
            >{{ t('$vuetify.auth.help') }}
            <a
              href="#"
              class="flex items-center gap-1 text-nowrap text-primary"
            >
              <span class="font-bold">{{ t('$vuetify.auth.help-link') }}</span>
              <span class="mso text-sm">open_in_new</span>
            </a>
          </span>
          <!-- Buttons -->
          <v-card-actions class="flex justify-end px-0 mt-8">
            <v-btn
              :variant="currentTheme === 'dark' ? 'flat' : 'flat'"
              color="primary"
              class="px-8 rounded-3xl"
              @click="$auth.doAuth()"
            >
              <i class="mi-log-in"></i>
              <span>{{ t('$vuetify.auth.login') }}</span>
            </v-btn>
          </v-card-actions>
        </div>
      </div>
    </v-card>
  </div>
</template>

<!-- <route lang="yaml">
meta:
  layout: centered
</route> -->
