<!DOCTYPE html>
<html class="<%= theme %>" lang="en">
<head>
  <%-
    await include('../partials/meta', {
      title: "Login",
    });
  %>
  <style>
    .other {
      display: grid;
      gap: 0.25rem;
      grid-template-columns: repeat(2, 1fr);
      width: 100%;
    }
  </style>
</head>
<body class="dark:bg-gray-800 dark:text-gray-300">
  <%-
    await include('../partials/header', {
    });
  %>
  <div class="container px-4 mx-auto">
    <div class="relative py-3 sm:max-w-xl mx-auto text-center">
      <% if (error) { %>
        <div id="error" class="text-center">
          <p class="text-lg font-semibold text-red-500"><%= error %></p>
        </div>
      <% } %>
      <div class="relative mt-4 bg-white shadow-md sm:rounded-lg text-left dark:bg-gray-700">
        <div class="h-2 rounded-t-md bg-[#7B68AA]"></div>
        <div class="py-6 px-8">
          <div>
            <h1 class="text-2xl font-semibold">Sign in with</h1>
            <div class="mt-[5px]"></div>
            <hr>
            <div class="mt-[5px]"></div>
            <div class="other">
              <section class="rounded-lg bg-gray-800 p-2">
                <a class="flex hover:underline justify-center items-center text-center" href="/account/login/discord">
                  <img class="align-middle" src="<%= textureServer %>/socials/discord.svg" alt="Discord">
                  <span class="mt-[2px] ml-[10px]">Discord</span>
                </a>
              </section>
            </div>
          </div>
          <div class="mt-[5px]"></div>
          <form action="/account/login" method="post">
            <label for="email" class="block font-semibold">Email<label>
            <input id="email" name="user" type="text" placeholder="Email" class="border dark:border-gray-600 w-full h-5 px-3 py-5 mt-2 dark:bg-gray-800 hover:outline-none focus:outline-none focus:ring-1 focus:ring-purple-300 rounded-md">
            <label for="password" class="block mt-3 font-semibold">Password<label>
            <input id="password" name="password" type="password" placeholder="Password" class="border dark:border-gray-600 w-full h-5 px-3 py-5 mt-2 dark:bg-gray-800 hover:outline-none focus:outline-none focus:ring-1 focus:ring-purple-300 rounded-md">
            <div class="flex justify-between mt-2">
              <div>
                <label for="rememberMe" class="hover:cursor-pointer">Remember Me</label>
                <input id="rememberMe" name="rememberMe" type="checkbox" />
              </div>
              <a href="/account/forgot-password" class="text-sm hover:underline">Forgot password?</a>
            </div>
            <div class="flex justify-center items-center mt-2">
              <button class="mt-2 text-white py-2 px-6 rounded-lg bg-[#7B68AA] hover:underline">Login</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>