<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>

<meta charset="utf-8" />
<title>Atimetrik-BCP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
<META HTTP-EQUIV="Expires" CONTENT="-1" />

<link rel="icon" href="img/altimetrik_favicon.ico" type="image/x-icon">
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/header.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />

<script>
function validateUsername() {
	var usrname = $("#username").val();
	if(usrname != '' && usrname.indexOf("@altimetrik.com") != -1){
		var name = usrname.split("@");
		$("#username").val(name[0])
	}
}
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
$(document).ready(function(){
	if(getUrlVars()["error"] == 'true'){
		$("#validateUserPassMsg").attr("style","display:block");
		$("#footerLinks").attr("style","margin-top:20px");
	}
});


</script>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12">
				<div id="fullPage">
					<div id="brandingWrapper" class="float">
						<div id="branding" class="illustrationClass"
							style='background-image: url(/img/illustration.jpg); height: 100vh;'></div>
					</div>
					<div id="contentWrapper" class="float">
						<div id="content">
							<div id="header">Altimetrik Corp</div>
							<div id="workArea">
								<div id="loginMessage" class="groupMargin">Sign in with
									your organizational account</div>
								<p id="validateUserPassMsg" style="display: none">
									<font color='red'>Incorrect user ID or password. Type
										the correct user ID and password, and try again.</font>
								</p>
								<div class="form-signin">
									<form action="/index" method="post">
										<!-- <div class="form-label-group"> -->

										<div class="input-group" style="width: 130%;">
											<input type="text" id="username" name="username"
												class="form-control" placeholder="Login id" required
												autofocus>
											<div class="input-group-append">
												<div class="input-group-text">@altimetrik.com</div>
											</div>

										</div>


										<!-- </div> -->
										</br>

										<div class="form-label-group">
											<input type="password" id="password" name="password"
												class="form-control" placeholder="Password" required>
										</div>
										</br>
										<button id="loginSubmit" onclick="return validateUsername()"
											class="btn btn-lg btn-block" type="submit"
											style="background-color: #f47b20">Sign in</button>
									</form>
								</div>
							</div>

							<div id="footerPlaceholder"></div>
							<div id="footer">
								<div id="footerLinks" class="floatReverse">
									<div>
										<span id="copyright">© 2013 Microsoft</span>
									</div>
								</div>
							</div>
						</div>



					</div>
				</div>
			</div>
		</div>
</body>