<body class="bg-default">
  <div class="main-content">
    <!-- Navbar -->
    <% include ../partials/auth/navbar %>
    <!-- Header -->
    <% include ../partials/auth/header %>
    <!-- Page content -->
    <div class="container mt--8 pb-5">
      <!-- Table -->
      <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
          <div class="card bg-secondary shadow border-0">
            <div class="card-header bg-transparent pb-5">
              <div class="text-muted text-center mt-2 mb-4"><small>Sign up with</small></div>
              <div class="text-center">
                <a href="#" class="btn btn-neutral btn-icon mr-4">
                  <span class="btn-inner--icon"><img src="img/icons/common/github.svg"></span>
                  <span class="btn-inner--text">Github</span>
                </a>
                <a href="#" class="btn btn-neutral btn-icon">
                  <span class="btn-inner--icon"><img src="img/icons/common/google.svg"></span>
                  <span class="btn-inner--text">Google</span>
                </a>
              </div>
            </div>
            <div class="card-body px-lg-5 py-lg-5">
              <div class="text-center text-muted mb-4">
                <small>Or sign up with credentials</small>
              </div>
              <form role="form" action="register" method="POST">
                <div class="form-group">
                  <div class="input-group input-group-alternative mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="ni ni-hat-3"></i></span>
                    </div>
                    <input class="form-control" name="name" placeholder="Name" type="text" required>
                  </div>
                  <% if (locals.messages && messages.errors && messages.errors.name) { %>
                    <strong class="invalid-feedback" style="display: block"><%= messages.errors.name %></strong>
                  <% } %>
                </div>
                <div class="form-group">
                  <div class="input-group input-group-alternative mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                    </div>
                    <input class="form-control" name="username" placeholder="Email" type="email" required>
                  </div>
                  <% if (locals.messages && messages.errors && messages.errors.username) { %>
                    <strong class="invalid-feedback" style="display: block"><%= messages.errors.username %></strong>
                  <% } %>
                </div>
                <div class="form-group">
                  <div class="input-group input-group-alternative">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
                    </div>
                    <input class="form-control" name="password" placeholder="Password" type="password" required>
                  </div>
                  <% if (locals.messages && messages.errors && messages.errors.password) { %>
                    <strong class="invalid-feedback" style="display: block"><%= messages.errors.password %></strong>
                  <% } %>
                </div>
                <div class="text-muted font-italic"><small>password strength: <span class="text-success font-weight-700">strong</span></small></div>
                <div class="row my-4">
                  <div class="col-12">
                    <div class="custom-control custom-control-alternative custom-checkbox">
                      <input class="custom-control-input" id="customCheckRegister" type="checkbox" required>
                      <label class="custom-control-label" for="customCheckRegister">
                        <span class="text-muted">I agree with the <a href="#!">Privacy Policy</a></span>
                      </label>
                    </div>
                  </div>
                </div>
                <% if (locals.messages && locals.messages.databaseError) { %>
                  <strong class="invalid-feedback" style="display: block"><%= messages.databaseError %></strong>
                <% } %>
                <div class="text-center">
                  <button class="btn btn-primary mt-4">Create account</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <% include ../partials/auth/footer %>

  <!-- Include scripts -->
  <% include ../partials/scripts %>
</body>
