{% extends "base.html" %}{% block title %}{{ t("signup.title") }}{% endblock %}
{% block body %}
<h1>{{ t("signup.title") }}</h1>
<div class="card">
  <form method="post" action="/signup">
    <input type="hidden" name="form_token" value="{{ form_token }}">
    <div style="position:absolute;left:-9999px" aria-hidden="true">
      <label for="website">{{ t("form.honeypot") }}</label>
      <input id="website" name="website" type="text" tabindex="-1" autocomplete="off">
    </div>
    <label for="handle">{{ t("form.handle") }}</label>
    <input id="handle" name="handle" type="text" required autofocus value="{{ handle or '' }}"
           pattern="[a-z0-9][a-z0-9._-]{1,31}">
    <p class="muted">{{ t("signup.address_hint", address="handle@" ~ relay_host) }}</p>
    <label for="email">{{ t("form.email") }}</label>
    <input id="email" name="email" type="email" autocomplete="email" required value="{{ email or '' }}">
    <p class="muted">{{ t("signup.email_hint") }}</p>
    <label for="pw">{{ t("form.password") }}</label>
    <input id="pw" name="password" type="password" autocomplete="new-password" required minlength="10">
    {% if turnstile_sitekey %}
    <div class="cf-turnstile" data-sitekey="{{ turnstile_sitekey }}"
         data-action="signup" data-theme="auto" style="margin-top:12px"></div>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    {% endif %}
    <p class="row" style="margin-top:18px"><button>{{ t("signup.submit") }}</button></p>
  </form>
</div>
<p class="muted">{{ t("signup.have_account") }} <a href="/login">{{ t("signup.sign_in") }}</a>.
  <a href="/privacy">{{ t("nav.privacy") }}</a> &middot; <a href="/terms">{{ t("nav.terms") }}</a></p>
{% endblock %}