<% include partials/header %>

<div class="row">
	<div class="col-md-12 text-center">
		<h1>Sign Up</h1>	
	</div>

	<div class="col-md-12">
		<form class="form-signin" action="/register" method="POST" enctype="multipart/form-data">
		    <div class="form-group">
		    	<label for="username" class="sr-only">Username</label>
		    	<input id="username" class="form-control" type="text" name="username" placeholder="username" maxlength="50" required autofocus>
		    </div>
		    <div class="form-group">
		    	<label for="password" class="sr-only">Password</label>
		    	<input id="password" class="form-control" type="password" name="password" placeholder="password" maxlength="50" required>
		    </div>
			<div class="form-group">
		    	<label for="firstname" class="sr-only">First name</label>
		    	<input id="firstname" class="form-control" type="text" name="firstname" placeholder="first name" maxlength="50" required>
		    </div>
		    <div class="form-group">
		    	<label for="lastname" class="sr-only">Last name</label>
		    	<input id="lastname" class="form-control" type="text" name="lastname" placeholder="last name" maxlength="50" required>
		    </div>
		    <div class="form-group">
		    	<label for="email" class="sr-only">E-mail</label>
		    	<input id="email" class="form-control" type="email" name="email" placeholder="e-mail" maxlength="80" required>
		    </div>		    
		    <div class="form-group">
				<label for="image">Avatar (max. size = 500kB)</label><br>
                <input type="file" id="image" name="image" accept="image/*">
			</div>
		    <div class="form-group">
		    	<label for="adminSecretCode" class="sr-only">Admin Secret Code (optional)</label>
		    	<input id="adminSecretCode" class="form-control" type="password" name="adminSecretCode" placeholder="admin secret code" maxLength="30">
		    </div>
		    <div class="form-group">
				<button class="btn btn-lg btn-primary btn-block" type="submit">Submit!</button>
			</div>
			<div class="form-group">
				<hr>
				<p>Already a user? <a href="/register">Log in</a></p>
			</div>
			<div class="form-group">
				<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> Go back</a>
			</div>
		</form>
	</div>
</div>

<% include partials/footer %>