{{template "base.html" .}}
{{define "title"}}Account Registration{{end}}
{{define "content"}}
<h1>Account Registration</h1>
<p>It will take a few days to process your submission, please be patient as the process is manual. <strong>Misaki</strong> will email you when she comes to her decision :3</p>
{{if .Error}}<p class="err">{{.Error}}</p>{{end}}
<form method="POST" action="/apply">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required minlength="1" maxlength="21" autocomplete="username" pattern="[a-zA-Z0-9_\-]+">
  <small class="field-hint">1–21 characters. Make sure it is unique for me!</small>

  <label for="password">Password</label>
  <input type="password" id="password" name="password" required minlength="8" maxlength="128" autocomplete="new-password">

  <label for="password_confirm">Password  <small>(again)</small></label>
  <input type="password" id="password_confirm" name="password_confirm" required minlength="8" maxlength="128" autocomplete="new-password">
  <small class="field-hint">At least 8 characters. Just so I know I got our little secret right &lt;3</small>

  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required maxlength="254" autocomplete="email">
  <small class="field-hint"><strong>Misaki</strong> needs some way to contact you!</small>

  <label for="bio">Biography</label>
  <textarea id="bio" name="bio" maxlength="2000" required></textarea>
  <small class="field-hint">Let <strong>misaki</strong> know a bit about yourself, and why you want an account on thirdculture. We'll keep it just between us okay (｡•̀ᴗ-)✧</small>

  <label style="display:flex;align-items:baseline;gap:.5rem;font-weight:normal;margin-bottom:1rem">
    <input type="checkbox" name="agree" required style="display:inline;width:auto;margin-bottom:0">
    <span>I have read and agree to the
      <a href="https://thirdculture.diy/manifesto" target="_blank" rel="noopener">Manifesto</a> and
      <a href="https://thirdculture.diy/privacy" target="_blank" rel="noopener">Privacy Policy</a>
    </span>
  </label>

  <input type="submit" value="Submit Application">
</form>
<p class="muted" style="margin-top:1.5rem">Already approved? <a href="/login">Log in</a></p>
<img src="/static/peep.jpeg" alt="" class="footer-art">
{{end}}