<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<link rel="stylesheet" href="/assets/css/login.css" />

<div class="wrapper">

	{{> header}}

	<div class="account-form-wrapper">
		<form action="/account/register" method="post" class="account register">
			<h2>Register</h2>
			<p>Enter your account details below</p>
			<div class="email">
				<label for="email">Email</label>
				<input name="email" id="email" type="email" value="{{ email }}" required>
			</div>
			<div>
				<label for="username">Username</label>
				<input name="username" id="username" value="{{ username }}" minlength=6 maxlength=16 required>
			</div>
			<div>
				<label for="mii_name">Mii Name (Max 10 characters)</label>
				<input name="mii_name" id="mii_name" value="{{ mii_name }}" maxlength=10 required>
			</div>
			<div>
				<label for="password">Password</label>
				<input name="password" id="password" type="password" autocomplete="new-password" required>
			</div>
			<div>
				<label for="password_confirm">Confirm Password</label>
				<input name="password_confirm" id="password_confirm" type="password" autocomplete="new-password" required>
			</div>
			<div class="h-captcha" data-sitekey="cf3fd74e-93ca-47e6-9fa0-5fc439de06d4"></div>
			<input name="redirect" id="redirect" type="hidden" value="{{redirect}}">
			<div class="buttons">
				<button type="submit">Register</button>
				<a href="/account/login{{#if redirect}}?redirect={{redirect}}{{/if}}" class="register">Already have an account?</a>
			</div>
		</form>
	</div>
</div>

{{#if error}}
<div class="banner-notice error">
	<div>
		<p>{{ error }}</p>
	</div>
</div>
{{/if}}