<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/default.css" rel="stylesheet">

<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>

<body class=keycloak-login-page data-ng-app=keycloak>
	<div id=keycloak-login-container data-ng-controller=GlobalCtrl>
		<div id=keycloak-login-standard>
			<h1>Register with {{config.name}}</h1>
			
			<div class="alert alert-info" data-ng-show="info">{{info}}</div>
			<div class="alert alert-error" data-ng-show="error">{{error}}</div>		

			<form action="#">
				<label for=firstname>Firstname</label>
				<input id=firstname type=text data-ng-model=firstname />
				
				<label for=lastname>Lastname</label>
				<input id=lastname type=text data-ng-model=lastname />
				
				<label for=email>Email</label>
				<input id=email type=email data-ng-model=email />

				<label for=username>Username</label>
				<input id=username type=text data-ng-model=username  />
								
				<label for=password>Password</label>
				<input id=password type=text data-ng-model=password required />
								
				<label for=password-confirm>Password confirmation</label>
				<input id=password-confirm type=text data-ng-model=passwordConfirm required pattern="{{password}}" title="Passwords don't match" />
								
				<div>
					<button class="btn btn-primary" id=keycloak-login-submit type=submit>Register</button>
					<a class="btn" href="{{config.callbackUrl}}">Cancel</a>					
				</div>
			</form>
		</div>

		<div id=keycloak-login-social>
			<h3>Login with</h3>

			<div data-ng-repeat="p in config.providers">
				<a href="/social/{{config.id}}/provider/{{p}}"><img data-ng-src="icons/{{p}}.png" /></a>
			</div>
		</div>
	</div>

</body>
</html>