{% extends 'base.html' %}
{% block title %}Sign up{% endblock %}
{% block content %}
<div class="darkbg login-container">
  <h1>Sign up</h1>
  <form method="post">
    <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>
  <span>After you sign up, a moderator will need to confirm your account before you will be allowed to post.</span>
</div>
{% endblock %}