{% extends 'base.html' %}
{% block title %}Sign up{% endblock %}
{% block content %}
<div class="darkbg login-container">
  <h1>Sign up</h1>
  {% if inviter %}
  <p>You have been invited by <a href="{{ url_for('users.page', username=inviter.username) }}">{{ inviter.username }}</a> to join {{ config.SITE_NAME }}. Create an identity below.</p>
  {% endif %}
  <form method="post">
    {% if key %}
      <input type="hidden" value={{key}} name="key">
    {% endif %}
    <label for="username">Username</label><br>
    <input type="text" id="username" name="username" pattern="[a-zA-Z0-9_-]{3,20}" title="3-20 characters. Only upper and lowercase letters, digits, hyphens, and underscores" required autocomplete="username"><br>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,255}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
    <label for="password-confirm">Confirm Password</label>
    <input type="password" id="password-confirm" name="password-confirm" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,255}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
    <input type="submit" value="Sign up">
  </form>
  {% if not inviter %}
  <span>After you sign up, a moderator will need to confirm your account before you will be allowed to post.</span>
  {% endif %}
</div>
{% endblock %}