---
import Layout from "../../layouts/Layout.astro"
import "../../styles/global.css"
import Alert from "../../components/Alert.astro"
import DoorTemplate from "../../components/DoorTemplate.astro"
import {LogIn, Lock} from "@lucide/astro"
import {getLangFromUrl, useTranslations} from "../../i18n/utils"

export async function getStaticPaths() {
    return [
        {params: {lang: "en"}},
        {params: {lang: "de"}},
    ]
}


const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)
---

<Layout>
  <Fragment slot="head">
    <script src="../../assets/main.ts"/>
  </Fragment>
  <div class="grid place-items-center grid-cols-1 gap-4 max-w-xl mx-auto" id="list">
    <Alert
        classList="hidden"
        id="alert-loggedout"
        color="warning"
        title={t("loggedOut.title")}
        description={t("loggedOut.description")}
    >
      <div class="flex justify-end">
        <a href="/auth/login" class="btn btn-sm btn-warning">
          <LogIn/>
            {t("login")}
        </a>
      </div>
    </Alert>
    <Alert
        classList="hidden"
        id="alert-unauthenticated"
        color="info"
        title={t("unauthenticated.title")}
        description={t("unauthenticated.description")}
    >
      <Fragment slot="icon"> <!-- pass table header -->
        <LogIn class="size-7"/>
      </Fragment>
    </Alert>
    <Alert
        classList="hidden"
        id="alert-unauthorized"
        color="info"
        title={t("unauthorized.title")}
        description={t("unauthorized.description")}
    >
      <Fragment slot="icon"> <!-- pass table header -->
        <Lock class="size-7"/>
      </Fragment>
    </Alert>
    <Alert
        classList="hidden"
        id="alert-serverError"
        color="error"
        title={t("serverError.title")}
        description={t("serverError.description")}
    />
    <Alert
        classList="hidden"
        id="alert-networkError"
        color="error"
        title={t("networkError.title")}
        description={t("networkError.description")}
    />
    <div class="divider w-full my-0" id="alert-divider"></div>
    <div id="loading-doors" class="card w-full bg-info/5 hidden">
      <div class="card-body flex-row gap-4 items-center justify-center">
        <span class="text-xl">Loading Doors</span>
        <span class="loading loading-spinner loading-xl"></span>
      </div>
    </div>
  </div>
  <DoorTemplate state="unknown"/>
</Layout>