<title>Forgot Password | Zairza</title>
<meta name="theme-color" content="#FF7610" />
<link rel="icon" type="image/png" href="/images/Visual.webp" />
<link
  href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
  rel="stylesheet"
/>
<link rel="stylesheet" href="/css/auth.css">
<style>
  * {
    font-family: "Montserrat", sans-serif;
  }
  section .card {
    border: 10px solid #ff7610;
  }
  .rounded-40 {
    border-radius: 40px;
  }
  section .container {
    height: 800px;
  }
</style>
<body>
  <section>
    <%- include('../partials/firebase.ejs') %>
    <%- include('../partials/toast.ejs') %>
    <!-- Container -->
    <div class="container rounded-lg">
      <div class="user signinBx">
        <div class="imgBx">
          <img src="/images/auth/forgot_password.png" alt="" />
        </div>
        <div class="formBx">
          <div class="form">
            <div class="mt-12 flex flex-col items-center">
              <h1 class="text-2xl xl:text-3xl font-bold my-12">
                Forgot your password?
              </h1>
              <p class="text-justify max-w-md">
                We get it, stuff happens. Just enter your email address below
                and weâ€™ll send you a link to reset your password!
              </p>
              <div class="w-full flex-1 mt-8">
                <div class="mx-auto max-w-md" id="form">
                  <input
                    class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:bg-white"
                    type="email"
                    placeholder="Email"
                    required
                  />
                  <small class="text-red-500 hidden invalid_email"
                    >Invalid Email Address</small
                  >
                  <button
                    id="update-btn"
                    onclick="sendEmail()"
                    class="mt-5 tracking-wide font-semibold register-btn text-gray-100 hover:text-white w-full py-4 rounded-lg transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
                  >
                    <img src="/images/auth/update.png" alt="" id="update-icon"/>
                    <span class="ml-3">Get Link</span>
                  </button>
                </div>
              </div>
             <div class="mt-10 flex flex-col">
                <a href="/auth#signup" class="text-center" style="color: #1071FF">Create an account!</a>
                <a href="/auth#signin" class="text-center my-2" style="color: #1071FF">Already have an account? Login!</a>
             </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
<script src="/js/forgot_password.js"></script>
