<!DOCTYPE html>
<html lang="{{lang}}">

<head>
  <meta charset="UTF-8" />
  <link rel=icon type=image href="img/lila.png" alt="Admin Lila
    Framework">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Admin Login</title>
  <link rel="stylesheet" href="../css/lila.css" />
</head>

<body class="bg-surface min-h-screen p-4">
  <main class="w-full flex justify-center items-center">
    <article class="w-mx-500-px">
      <h3 class="text-center">{{translate['login']}}</h3>
      <form id="loginForm" class="space-y-4">
        <div>
          <label>User</label>
          <input type="text" name="user" id="user" required minlength="2" maxlength="255" placeholder="User" />
        </div>
        <div>
          <label>Password</label>
          <input type="password" name="password" id="password" required minlength="2" maxlength="255"
            placeholder="Password" />
        </div>
        <button type="submit" class="w-full">Send</button>
      </form>
    </article>
  </main>

  <script>
    document
      .getElementById("loginForm")
      .addEventListener("submit", async function (event) {
        event.preventDefault();
        const formData = Object.fromEntries(new FormData(event.target));
        try {
          const r = await fetch("/admin/login", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(formData),
          });
          const response = await r.json();
          if (response.success) {
            window.location.href = response.redirect;
          } else {
            document.getElementById("password").value = "";
            alert(response.message || "Error");
          }
        } catch (error) {
          alert("Error");
          console.error("Error:", error);
        }
      });
  </script>
</body>

</html>