{{template "header.html" .S}}

<script>
function checkPasswordMatch() {
	var password = document.forms["createAccount"]["pass"].value;
	var confirmPassword =  document.forms["createAccount"]["confirmPass"].value;

	if (password != confirmPassword) {
		document.getElementById("confirmPass").classList.remove("is-valid");
		document.getElementById("confirmPass").classList.add("is-invalid");
	} else {
		document.getElementById("confirmPass").classList.remove("is-invalid");
		document.getElementById("confirmPass").classList.add("is-valid");
	}
}
</script>

<div class="row justify-content-center">
<div class="col-sm-4">
  <h3>Log In</h3>
  <form id="login" method="POST" action="/login/" enctype="application/x-www-form-urlencoded">
    <div class="input-group mb-3">
      <span class="input-group-text" id="user">
    	<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
    	  <use xlink:href="/img/bootstrap-icons.svg#person-fill"/>
    	</svg>
      </span>
      <input type="text" class="form-control" placeholder="Username" name="user" autofocus="autofocus" aria-label="Username" aria-describedby="user">
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text" id="pass">
    	<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
    	  <use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
    	</svg>
      </span>
      <input type="password" class="form-control" placeholder="Password" name="pass" aria-label="Password" aria-describedby="pass">
    </div>
    <input class="btn btn-primary" type="submit" name="submit" value="Log In"/>
  </form>
</div>

<div class="col-sm-2">
	<br />
	<br />
	<h3 class="centered">Or</h3>
	<br />
	<br />
</div>
<div class="col-sm-4">
  <h3>Create an Account</h3>
  <form id="createAccount" method="POST" action="/create_user/" enctype="application/x-www-form-urlencoded">
    <div class="input-group mb-3">
      <span class="input-group-text" id="user">
    	<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
    	  <use xlink:href="/img/bootstrap-icons.svg#person-fill"/>
    	</svg>
      </span>
      <input type="text" class="form-control" placeholder="Username" name="user" autofocus="autofocus" aria-label="Username" aria-describedby="user">
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text" id="pass">
    	<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
    	  <use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
    	</svg>
      </span>
      <input type="password" class="form-control" placeholder="Password" name="pass" aria-label="Password" aria-describedby="pass" id="pass" onchange="checkPasswordMatch()">
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text" id="pass">
    	<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
    	  <use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
    	</svg>
      </span>
      <input type="password" class="form-control" placeholder="Confirm password" name="confirmPass" aria-label="Password" aria-describedby="confirmPass" id="confirmPass" onchange="checkPasswordMatch()">
      <div class="invalid-feedback">Passwords don't match!</div>
    </div>
    <input class="btn btn-primary" type="submit" name="submit" value="Create" />
  </form>
</div>
</div>

{{template "footer.html" .S}}