<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="theme-color" content="#FF7610" />
    <link rel="icon" type="image/png" href="/images/Visual.webp" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Join | 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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"
    />
    <!-- <link
      rel="stylesheet"
      href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
    /> -->
    <link rel="stylesheet" href="/css/auth.css" />
  </head>
  <body>
    <%- include('../partials/firebase.ejs') %>
    <section>
      <%- include('../partials/toast.ejs') %>

        <div class="container">
          <div class="user signinBx">
            <div class="imgBx">
              <img src="/images/auth/signin.png" alt="" />
            </div>
            <div class="formBx">
              <div class="form w-full" id="signin_form">
                <h1 class="text-2xl xl:text-3xl text-center font-bold">
                  Sign In
                </h1>
                <!-- <div class="mx-auto max-w-md mt-8"> -->
                <div class="w-full flex-1 mt-8">
                  <div class="my-12">
                    <div class="flex flex-col 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"
                        type="email"
                        placeholder="Email"
                        required
                      />
                      <small class="text-red-500 hidden invalid_email"
                        >Invalid Email Address</small
                      >
                      <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="Password"
                          required
                          id="signin-password"
                        />
                        <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>
                      <button
                        id="signin-btn"
                        onclick="authenticate('signin')"
                        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"
                      >
                        <svg
                          id="signin-svg"
                          xmlns="http://www.w3.org/2000/svg"
                          class="icon icon-tabler icon-tabler-login w-6 h-6 -ml-2"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          stroke-width="2"
                          stroke="currentColor"
                          fill="none"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        >
                          <path
                            stroke="none"
                            d="M0 0h24v24H0z"
                            fill="none"
                          ></path>
                          <path
                            d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"
                          ></path>
                          <path d="M20 12h-13l3 -3m0 6l-3 -3"></path>
                        </svg>
                        <span class="ml-3"> Sign In </span>
                      </button>
                      <a
                        href="/forgot"
                        class="mt-4 text-center"
                        style="color: #1471ff"
                        >Forgot Password ?</a
                      >
                    </div>
                  </div>
  
                  <div class="flex flex-col items-center">
                    <button
                      id="signin_google"
                      onclick="ThirdPartyAuthenticate('Google')"
                      class="w-full max-w-md font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"
                    >
                      <div class="bg-white p-2 rounded-full">
                        <svg class="w-4" viewBox="0 0 533.5 544.3">
                          <path
                            d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
                            fill="#4285f4"
                          />
                          <path
                            d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
                            fill="#34a853"
                          />
                          <path
                            d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
                            fill="#fbbc04"
                          />
                          <path
                            d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
                            fill="#ea4335"
                          />
                        </svg>
                      </div>
                      <span class="ml-4"> Sign In with Google </span>
                    </button>
  
                    <button
                      id="signin_github"
                      onclick="ThirdPartyAuthenticate('Github')"
                      class="w-full max-w-md font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5"
                    >
                      <div class="bg-white p-1 rounded-full">
                        <svg class="w-6" viewBox="0 0 32 32">
                          <path
                            fill-rule="evenodd"
                            d="M16 4C9.371 4 4 9.371 4 16c0 5.3 3.438 9.8 8.207 11.387.602.11.82-.258.82-.578 0-.286-.011-1.04-.015-2.04-3.34.723-4.043-1.609-4.043-1.609-.547-1.387-1.332-1.758-1.332-1.758-1.09-.742.082-.726.082-.726 1.203.086 1.836 1.234 1.836 1.234 1.07 1.836 2.808 1.305 3.492 1 .11-.777.422-1.305.762-1.605-2.664-.301-5.465-1.332-5.465-5.93 0-1.313.469-2.383 1.234-3.223-.121-.3-.535-1.523.117-3.175 0 0 1.008-.32 3.301 1.23A11.487 11.487 0 0116 9.805c1.02.004 2.047.136 3.004.402 2.293-1.55 3.297-1.23 3.297-1.23.656 1.652.246 2.875.12 3.175.77.84 1.231 1.91 1.231 3.223 0 4.61-2.804 5.621-5.476 5.922.43.367.812 1.101.812 2.219 0 1.605-.011 2.898-.011 3.293 0 .32.214.695.824.578C24.566 25.797 28 21.3 28 16c0-6.629-5.371-12-12-12z"
                          />
                        </svg>
                      </div>
                      <span class="ml-4"> Sign In with GitHub </span>
                    </button>
                  </div>
                </div>
                <p class="signup text-center">
                  Don't have an account ?
                  <a href="#signup" onclick="toggleForm();">Sign Up.</a>
                </p>
                <!-- </div> -->
              </div>
            </div>
          </div>
          <div class="user signupBx">
            <div class="formBx">
              <div class="form" id="signup_form">
                <div class="mt-12 flex flex-col items-center">
                  <h1 class="text-2xl xl:text-3xl font-bold">
                    Sign up for Zairza
                  </h1>
                  <div class="w-full flex-1 mt-8">
                    <div class="flex flex-col items-center">
                      <button
                        id="signup_google"
                        onclick="ThirdPartyAuthenticate('Google')"
                        class="w-full max-w-md font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"
                      >
                        <div class="bg-white p-2 rounded-full">
                          <svg class="w-4" viewBox="0 0 533.5 544.3">
                            <path
                              d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
                              fill="#4285f4"
                            />
                            <path
                              d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
                              fill="#34a853"
                            />
                            <path
                              d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
                              fill="#fbbc04"
                            />
                            <path
                              d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
                              fill="#ea4335"
                            />
                          </svg>
                        </div>
                        <span class="ml-4"> Sign Up with Google </span>
                      </button>
  
                      <button
                        id="signup_github"
                        onclick="ThirdPartyAuthenticate('Github')"
                        class="w-full max-w-md font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5"
                      >
                        <div class="bg-white p-1 rounded-full">
                          <svg class="w-6" viewBox="0 0 32 32">
                            <path
                              fill-rule="evenodd"
                              d="M16 4C9.371 4 4 9.371 4 16c0 5.3 3.438 9.8 8.207 11.387.602.11.82-.258.82-.578 0-.286-.011-1.04-.015-2.04-3.34.723-4.043-1.609-4.043-1.609-.547-1.387-1.332-1.758-1.332-1.758-1.09-.742.082-.726.082-.726 1.203.086 1.836 1.234 1.836 1.234 1.07 1.836 2.808 1.305 3.492 1 .11-.777.422-1.305.762-1.605-2.664-.301-5.465-1.332-5.465-5.93 0-1.313.469-2.383 1.234-3.223-.121-.3-.535-1.523.117-3.175 0 0 1.008-.32 3.301 1.23A11.487 11.487 0 0116 9.805c1.02.004 2.047.136 3.004.402 2.293-1.55 3.297-1.23 3.297-1.23.656 1.652.246 2.875.12 3.175.77.84 1.231 1.91 1.231 3.223 0 4.61-2.804 5.621-5.476 5.922.43.367.812 1.101.812 2.219 0 1.605-.011 2.898-.011 3.293 0 .32.214.695.824.578C24.566 25.797 28 21.3 28 16c0-6.629-5.371-12-12-12z"
                            />
                          </svg>
                        </div>
                        <span class="ml-4">Sign Up with GitHub</span>
                      </button>
                    </div>
  
                    <div class="my-12 border-b text-center">
                      <div
                        class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2"
                      >
                        Or sign up with e-mail
                      </div>
                    </div>
  
                    <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"
                        type="email"
                        placeholder="Email"
                        required
                      />
                      <small class="text-red-500 hidden invalid_email"
                        >Invalid Email Address</small
                      >
                      <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="signup-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="signup-btn"
                        onclick="authenticate('signup')"
                        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"
                      >
                        <svg
                          id="signup-svg"
                          class="w-6 h-6 -ml-2"
                          fill="none"
                          stroke="currentColor"
                          stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        >
                          <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
                          <circle cx="8.5" cy="7" r="4" />
                          <path d="M20 8v6M23 11h-6" />
                        </svg>
                        <span class="ml-3"> Sign Up </span>
                      </button>
                      <p class="mt-6 text-xs text-gray-600 text-center">
                        I agree to abide by zairza's rules and regulations.
                      </p>
                    </div>
                  </div>
                </div>
                <p class="signup text-center">
                  Already have an account ?
                  <a href="#signin" onclick="toggleForm();">Sign in.</a>
                </p>
              </div>
            </div>
            <div class="imgBx">
              <img src="/images/auth/signup.png" alt="" />
            </div>
          </div>
        </div>

    </section>
  </body>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
    integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
    crossorigin="anonymous"
  ></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" integrity="sha512-3j3VU6WC5rPQB4Ld1jnLV7Kd5xr+cq9avvhwqzbH/taCRNURoeEpoPBK9pDyeukwSxwRPJ8fDgvYXd6SkaZ2TA==" crossorigin="anonymous"></script>
  <script src="/js/auth.js"></script>
  <script src="/js/localAuth.js"></script>
  <script src="/js/thirdPartyAuth.js"></script>
</html>
