<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#FF7610" />
    <link rel="icon" type="image/png" href="/images/Visual.webp" />
    <title>New Password | Zairza</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/auth.css" />
  </head>
  <body>
    <section>
      <%- include('../partials/firebase.ejs') %>
      <%- include('../partials/toast.ejs') %>
      <div class="container rounded-lg">
        <div class="user signinBx">
          <div class="formBx">
            <div class="form" id="update_form">
              <div class="mt-12 flex flex-col items-center">
                <h1 class="text-2xl xl:text-3xl font-bold">
                  Set your new password
                </h1>
                <div class="w-full flex-1 mt-8">
                  <div class="mx-auto max-w-md">
                    <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 mt-5 js-password"
                      type="password"
                      placeholder="Password"
                      required
                      id="new-password"
                    />
                    <div class="relative">
                      <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 mt-5 js-password"
                        type="password"
                        placeholder="Confirm Password"
                        id="confirm-password"
                        required
                      />
                      <div
                        class="absolute inset-y-0 right-0 flex items-center px-2"
                      >
                        <span
                          class="bg-gray-200 hover:bg-gray-300 rounded px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label"
                          onclick="togglePasswordVisibility($(this))"
                          ><i class="bx bx-hide" style="color: #1471ff"></i
                        ></span>
                      </div>
                    </div>
                    <small class="text-red-500 hidden no_match"
                      >Passwords donot match</small
                    >
                    <button
                      id="update-btn"
                      onclick="updatePassword()"
                      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"
                        id="update-icon"
                        alt=""
                      />
                      <span class="ml-3">Update Password</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="imgBx">
            <img src="/images/auth/newPassword.png" alt="" />
          </div>
        </div>
      </div>
    </section>
  </body>
  <script src="/js/newPassword.js"></script>
</html>
