<!DOCTYPE html>
<html data-bs-theme="light" lang="en" class="h-100">
  <%- include('common/head', {title: "Login | The Attendance Management"}) %>
  <!-- <title>Login - Attendance Management</title> -->
  <body class="bg-gradient-primary d-flex flex-column h-100">
    <div class="container flex-grow-1">
      <div class="row justify-content-center">
        <div class="col-md-9 col-lg-12 col-xl-10">
          <div class="card shadow-lg o-hidden border-0 my-5">
            <div class="card-body p-0">
              <div class="row">
                <div class="col-lg-6 d-none d-lg-flex">
                  <div
                    class="flex-grow-1 bg-login-image"
                    style="background-image: url('images/dogs/image3.jpeg')"
                  ></div>
                </div>
                <div class="col-lg-6">
                  <div class="p-5">
                    <div class="text-center">
                      <h4 class="text-dark mb-4">
                        Welcome Back! <br />
                        Login to view your attendance
                      </h4>
                    </div>
                    <!-- login form -->
                    <form class="user" action="/login" method="post">
                      <div class="mb-3">
                        <input
                          required
                          class="form-control form-control-user"
                          type="text"
                          id="exampleInputEmail"
                          aria-describedby="emailHelp"
                          placeholder="Email Address or Username"
                          name="email"
                        />
                      </div>
                      <div class="mb-3">
                        <input
                          required
                          class="form-control form-control-user"
                          type="password"
                          id="exampleInputPassword"
                          placeholder="Password"
                          name="password"
                        />
                      </div>
                      <div class="mb-3">
                        <div class="custom-control custom-checkbox small">
                          <div class="form-check">
                            <input
                              class="form-check-input custom-control-input"
                              type="checkbox"
                              id="remember-me"
                            /><label
                              class="form-check-label custom-control-label"
                              for="remember-me"
                              >Remember Me</label
                            >
                          </div>
                        </div>
                      </div>
                      <button
                        class="btn btn-primary d-block btn-user w-100"
                        type="submit"
                      >
                        Login
                      </button>
                      <!-- temporarily hiding these options -->
                      <div class="visually-hidden">
                        <hr />
                        <a
                          class="btn btn-primary d-block btn-google btn-user w-100 mb-2"
                          role="button"
                          ><i class="fab fa-google"></i>&nbsp; Login with
                          Google</a
                        ><a
                          class="btn btn-primary d-block btn-facebook btn-user w-100"
                          role="button"
                          ><i class="fab fa-facebook-f"></i>&nbsp; Login with
                          Facebook</a
                        >
                      </div>
                      <hr />
                    </form>
                    <div class="text-center">
                      <a
                        class="small"
                        href=""
                        onclick="alert('Contact me to use a new password (only until I automate this process)')"
                        >Forgot Password?</a
                      >
                    </div>
                    <div class="text-center">
                      <a class="small" href="/register">Create an Account!</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <%- include('common/footer'); %>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/theme.js"></script>
  </body>
</html>
