{% extends "closedverse_main/layout.html" %}
{% load static %}{% block main-body %}
<div class="main-column center">
    <div class="post-list-outline login-page">
        <form method="post" onload="">
			<img src="{% static "img/menu-logo.svg" %}">
			<p class="lh">Sign Up</p>
			<p>Create a Cedar account on this instance to access this instance.</p><br>
			<p>Please follow <a href="{% url "main:help-rules" %}">our rules</a>. If you don't, be careful with your behavior.<br><br>You <strong>must</strong> be {{ age }} years of age or older to join, no exceptions.<br>If you are suspected to be younger than {{ age }} years old, we will ban you until you're {{ age }}.</p>
			{% if invite_only %}<h3 class="label"><label><span class="red">*</span> Invite code: <input type="text" class="auth-input" name="invite_code" maxlength="64" minlength="4" placeholder="Invite code"></label></h3>{% endif %}
			<h3 class="label"><label><span class="red">*$</span> User ID: <input type="text" class="auth-input" name="username" maxlength="32" minlength="4" placeholder="ID"></label></h3>
			<h3 class="label"><label>Nickname: <input type="text" class="auth-input" name="nickname" maxlength="32" placeholder="Nick/Mii name?"></label></h3>
			<h3 class="label nnid"><label>Nintendo Network ID: <input type="text" class="auth-input" name="origin_id" maxlength="16" minlength="6" placeholder="NNID" data-mii-domain="{{ mii_domain }}" data-action="{{ mii_endpoint }}">
				<img class="none">
			</label></h3>
			<h3 class="label"><label><span class="red">%</span> E-mail address: <input type="email" class="auth-input" name="email" maxlength="254" minlength="6" placeholder="Email"></label></h3>
			<h3 class="label"><label><span class="red">*</span> Password: <input type="password" class="auth-input" name="password" maxlength="32" minlength="6" placeholder="Password"></label></h3>
			<h3 class="label"><label><span class="red">*</span> Confirm password: <input type="password" class="auth-input" name="password_again" maxlength="32" minlength="6" placeholder="Password again"></label></h3>
			{% csrf_token %}
			{% if recaptcha %}
			<div class="g-recaptcha" data-sitekey="{{ recaptcha }}" data-theme="dark"></div>
			<script src='https://www.google.com/recaptcha/api.js'></script>
			{% endif %}

			<p class="red" style="margin-bottom:6px"></p>
			<button type="submit" class="button" onclick="event.preventDefault();cac();">Create account</button>
			<div class="ll">
				<p>All fields with a red asterisk (<span class="red">*</span>) are required.</p>
				<p>NNIDs are only required for getting a Mii and a nickname from.</p>
				<p>If you do not provide a nickname but provide an NNID, the nickname will be taken from that ID. The ID's nickname, however, is prioritized over the nickname field.</p>
				<p>You will be able to change your avatar after you sign up.</p>
				<p><span class="red">%</span>: Emails are not required to sign up, however it is used for Gravatar and account recovery.</p>
				<p><span class="red">$</span>: Your username is used to log in. It'll appear similarly to your NNID on Miiverse, below your nickname.</p>
			</div>
		</form>
	</div>
</div>
{% endblock %}