---
import Form from "@/components/Form.astro";
import Button from "@/components/Button.astro";
import TextFieldInput from "@/components/TextFieldInput.astro";
import TextFieldLabel from "@/components/TextFieldLabel.astro";

import { AUTH_API } from "@/lib/constants";

const formBaseAction = `${AUTH_API}/login_mfa`;
---

<Form title="2nd Factor Login">
  <div>
    <form
      id="login-form"
      class="flex flex-col gap-2"
      action={`${formBaseAction}`}
      method="post"
      enctype="application/x-www-form-urlencoded"
    >
      <div class="hidden" set:html={`{{ state | escape("none") }}`} />

      <div
        class="grid grid-cols-2 items-center gap-4"
        style={{ "grid-template-columns": "auto 1fr" }}
      >
        <TextFieldLabel>Code:</TextFieldLabel>
        <TextFieldInput
          required
          tabindex="1"
          type="text"
          name="totp"
          placeholder="code"
          autocomplete="off"
        />
      </div>

      <div class="my-2 flex justify-between">
        <Button tabindex="3" variant="default" type="submit"> Submit </Button>
      </div>
    </form>
  </div>
</Form>
