{% extends "base.html" %}

{% block body %}
  <h1>Sign Up</h1>
  <div>tAuth</div>
  <p>
    <form method="POST">
      {% csrf_token %}
      <p>
        <div><input name="username" id="username" required type="text" pattern="[a-z0-9A-Z_][a-z0-9A-Z_\-]{0,28}[a-z0-9A-Z_]" maxlength="30" placeholder="Username"></div>
        <label for="username"><small>
          <ul class="left inline-block">
            <li><b>2-30</b> characters</li>
            <li><b>A-Z</b>, <b>0-9</b>, <b>underscores</b>, and <b>hyphens</b> accepted.</li>
            <li>Can't start or end with a <b>hyphen</b></li>
            <li>Case <b>insensitive</b></li>
          </ul>
        </small></label>
      </p>
      <p>
        <div><input name="password" id="password" required type="password" placeholder="Password" maxlength="100"></div>
        <label for="password"><small>
          <ul class="left inline-block">
            <li><b>6+</b> characters</li>
            <li>Must include a <b>letter</b>, <b>number</b>, and <b>special character</b></li>
            <li>Can't include your <b>username</b></li>
          </ul>
        </small></label>
      </p>
      <p><input type="submit" value="Sign Up"></p>
    </form>
  </p>
{% endblock %}