<!DOCTYPE html>
<html data-bs-theme="light" lang="en" class="h-100">
  <%- include('common/head', {title: "Register | The Attendance Management"});
  %>

  <body class="bg-gradient-primary d-flex flex-column h-100">
    <div class="container flex-grow-1">
      <div class="card shadow-lg o-hidden border-0 my-5">
        <div class="card-body p-0">
          <div class="row">
            <div class="col-lg-5 d-none d-lg-flex">
              <div
                class="flex-grow-1 bg-register-image"
                style="background-image: url('images/dogs/image2.jpeg')"
              ></div>
            </div>
            <div class="col-lg-7">
              <div class="p-5">
                <div class="text-center">
                  <h4 class="text-dark mb-4">Create an Account</h4>
                </div>
                <!-- form -->
                <form
                  class="user"
                  method="post"
                  action="/register"
                  id="registrationForm"
                >
                  <!-- name -->
                  <!-- first name -->
                  <div class="row mb-3">
                    <div class="col-sm-6 mb-3 mb-sm-0">
                      <input
                        required
                        class="form-control form-control-user"
                        type="text"
                        id="firstName"
                        placeholder="First Name"
                        name="firstName"
                      />
                    </div>
                    <!-- last name -->
                    <div class="col-sm-6">
                      <input
                        required
                        class="form-control form-control-user"
                        type="text"
                        id="lastName"
                        placeholder="Last Name"
                        name="lastName"
                      />
                    </div>
                  </div>
                  <!-- email -->
                  <div class="mb-3">
                    <div class="col">
                      <input
                        required
                        class="form-control form-control-user"
                        type="email"
                        id="email"
                        aria-describedby="emailHelp"
                        placeholder="Email Address"
                        name="email"
                      />
                    </div>
                  </div>
                  <!-- username -->
                  <div class="row mb-3">
                    <div class="col-sm-6 mb-3 mb-sm-0">
                      <input
                        required
                        class="form-control form-control-user"
                        type="text"
                        id="username"
                        aria-describedby="username"
                        placeholder="Username"
                        name="username"
                      />
                    </div>
                    <!-- password -->
                    <div class="col-sm-6 mb-3 mb-sm-0">
                      <input
                        required
                        class="form-control form-control-user"
                        type="password"
                        id="password"
                        placeholder="Password"
                        name="password"
                      />
                    </div>
                  </div>
                  <!-- submit button -->
                  <button
                    class="btn btn-primary d-block btn-user w-100"
                    type="submit"
                  >
                    Register Account
                  </button>
                  <hr />
                  <!-- Google and Facebook login -->
                  <div class="visually-hidden">
                    <a
                      class="btn btn-primary d-block btn-google btn-user w-100 mb-2"
                      role="button"
                      ><i class="fab fa-google"></i>&nbsp; Register 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; Register with
                      Facebook</a
                    >
                    <hr />
                  </div>
                </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="/login"
                    >Already have an account? Login!</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <%- include('common/footer'); %>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/register.js"></script>
    <script src="js/theme.js"></script>
  </body>
</html>
