<script setup lang="ts">
import { useRuntimeConfig, useSeoMeta } from "#app";
import { useBreadcrumbStore } from "~/stores/breadcrumbs";
import LoginForm from "~/components/LoginForm.vue";

const config = useRuntimeConfig();
const breadcrumbStore = useBreadcrumbStore();
breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Login", to: "/auth/login" }]);

useSeoMeta({
  title: "Glowing Fiesta - Login",
  ogTitle: "Glowing Fiesta - Login",
  description: "This is the login page of a very nice all-purpose application",
  ogDescription: "This is the login page of a very nice all-purpose application",
  ogImage: config.public.hostUrl + "/images/human.png",
});
</script>

<template>
  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-center justify-center gap-2">
    <div class="flex w-full max-w-sm flex-col gap-6">
      <LoginForm />
    </div>
  </div>
</template>
