<div class="row">
	<div class="col-12 col-md-6 col-lg-4 mx-auto">
		<h1 class="h3 my-3 text-center">Register</h1>
		{% autoescape %}
			{{ message|raw }}
		{% endautoescape %}
		<div class="mb-3">
			<em class="fas fa-asterisk fa-xs text-danger mr-2"></em>Required
		</div>
		<form id="frmRegister" action="{{ registerURL }}" method="post" class="needs-validation" autocomplete="off" novalidate>
			<div class="form-group">
				<label for="name">Full Name<em class="fas fa-asterisk fa-xs text-danger ml-2"></em>
				</label>
				<input type="text" id="name" name="name" class="form-control" placeholder="Insert your full name" value="{{ name }}" data-error-required="The full name is required" required>
				<div class="invalid-feedback"></div>
			</div>
			<div class="form-group">
				<label for="user">Username<em class="fas fa-asterisk fa-xs text-danger ml-2"></em>
				</label>
				<input type="text" id="user" name="user" class="form-control" placeholder="Insert your username" value="{{ username }}" data-error-required="The username is required" required>
				<div class="invalid-feedback"></div>
			</div>
			<div class="form-group">
				<label for="email">Email<em class="fas fa-asterisk fa-xs text-danger ml-2"></em>
				</label>
				<input type="email" id="email" name="email" class="form-control" placeholder="Insert your email address" value="{{ email }}" pattern="^[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$" data-error-required="The email is required" data-error-pattern="The email is invalid" required>
				<div class="invalid-feedback"></div>
			</div>
			<div class="form-group">
				<label for="password">New Password<em class="fas fa-asterisk fa-xs text-danger ml-2"></em>
				</label>
				<input type="password" id="password" name="password" class="form-control" placeholder="Insert your new password" data-error-required="The password is required" data-error-pattern="The new password must contain at least 8 characters" pattern="[^ ]{8,}" required>
				<div class="invalid-feedback"></div>
			</div>
			<div class="form-group">
				<label for="retype_password">
					Confirm New Password<em class="fas fa-asterisk fa-xs text-danger ml-2"></em>
				</label>
				<input type="password" id="retype_password" name="retype_password" class="form-control" placeholder="Confirm your new password" data-error-required="The confirm new password is required" data-error-pattern="The confirm new password must contain at least 8 characters" pattern="[^ ]{8,}" required>
				<div class="invalid-feedback"></div>
			</div>
			<div class="form-group text-center">
				<div class="form-row">
					<div class="col-6">
						<a href="{{ loginURL }}" class="btn btn-block btn-secondary">
							<em class="fas fa-arrow-left mr-2"></em>Login
						</a>
					</div>
					<div class="col-6">
						{% if recaptcha_site_key %}
							<div id="g-recaptcha" class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}" data-size="invisible" data-callback="gCallback"></div>
							<input type="hidden" id="captcha" name="captcha">
						{% endif %}
						<button type="submit" name="submit" class="btn btn-block btn-custom">
							<em class="fas fa-check mr-2"></em>Register
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
