{{define "login"}}{{ template "header" . }} 
      <div class="row">
        <div class="col">
		<div id="container" class="card" style="width: 20em">
		  <div class="card-body">
		    <h1 class="card-title">Login</h1>
		    <br>
		    <p class="card-text">
			<form method="post" action="./login" id="form" name="form" onSubmit="submitForm()">
			    <div class="mb-3">
				<input type="text" class="form-control mx-auto" style="max-width: 300px;" 
				       autocomplete="username" placeholder="Username" value="{{.User}}" id="username">
				<input type="hidden" id="uname_hidden" name="username">
			    </div>

			    <div class="mb-3">
				<input type="password" class="form-control mx-auto" style="max-width: 300px;" 
				       autocomplete="current-password" placeholder="Password" id="password">
				<input type="hidden" id="pw_hidden" name="password">
			    </div>

{{ if .IsFailedLogin }}
			    <div class="mb-3">
				<span class="text-danger">Incorrect username or password!</span>
			    </div>
{{ end }}

			    <div class="mt-4">
				<button type="submit" id="submitbutton" class="btn btn-primary w-100 mx-auto" style="max-width: 300px;">
				    Login
				</button>
			    </div>
			</form>
			<br><br>
			<a href="./forgotpw">Forgot password</a></p>
		  </div>
		</div>
	    </div>
   	 </div>
<script>
function submitForm(){
	document.getElementById("username").disabled = true;
	document.getElementById("password").disabled = true;
	document.getElementById("uname_hidden").value = document.getElementById("username").value;
	document.getElementById("pw_hidden").value = document.getElementById("password").value;
	document.getElementById("submitbutton").disabled = true;
	return true;
}
</script>
{{ template "pagename" "Login"}}
{{ template "customjs" .}}
{{ template "footer" }}
{{end}}
