<!DOCTYPE html>
<html class="<%= theme %>" lang="en">
<head>
  <%-
    await include('../partials/meta', {
      title: "Account Recovery | Forgot Password",
    });
  %>
</head>
<body class="dark:bg-gray-800 dark:text-gray-300">
  <%-
    await include('../partials/header', {
    });
  %>
  <div class="container px-4 mx-auto">
    <h1 class="text-4xl font-bold">Forgot Password</h1>
    <div class="mt-[5px]"></div>
    <hr>
    <div class="mt-[5px]"></div>
    <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>
      <% } %>
      <% if (message) { %>
        <div id="message" class="text-center">
          <p class="text-lg font-semibold text-green-500"><%= message %></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">Password Reset</h1>
          </div>
          <div class="mt-[5px]"></div>
          <% if (stage === 0) { %>
            <form action="/account/forgot-password?stage=0" method="post">
              <label for="email">Email Address</label>
              <input type="email" name="email" id="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" autocomplete="off">
              <button type="submit" class="mt-2 text-white py-2 px-6 rounded-lg bg-[#7B68AA] hover:underline">Submit</button>
            </form>
          <% } else if (stage === 1) { %>
            <% if (typeof uniqueId === 'undefined') uniqueId = 'null' %>
            <form action="/account/forgot-password?stage=1" method="post">
              <input type="text" name="id" id="" value="<%= uniqueId %>" hidden>
              <label for="password">Password</label>
              <input type="password" name="password" id="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" autocomplete="off">
              <label for="conf_password">Confirm Password</label>
              <input type="password" name="conf_password" id="conf_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" autocomplete="off">
              <button type="submit" class="mt-2 text-white py-2 px-6 rounded-lg bg-[#7B68AA] hover:underline">Submit</button>
            </form>
          <% } %>
        </div>
      </div>
    </div>
  </div>
</body>
</html>