{% extends "base.html" %}{% block title %}{{ t("signup.title") }}{% endblock %}
{% block body %}
<div class="auth">
  <h1>{{ t("signup.title") }}</h1>
  <p class="lede">{{ t("signup.lede") }}</p>

  <p class="free">
    {% if portal_url %}
      {{ t("signup.free", portal='<a href="' ~ portal_url ~ '" rel="noopener">' ~ portal_name ~ '</a>') | safe }}
    {% else %}
      {{ t("signup.free_plain") }}
    {% endif %}
  </p>

  <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>

      <div class="field">
        <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}" autocomplete="username">
        <p class="hint">{{ t("signup.address_hint", address="handle@" ~ relay_host) }}</p>
      </div>

      <div class="field">
        <label for="email">{{ t("form.email") }}</label>
        <input id="email" name="email" type="email" autocomplete="email" required
               value="{{ email or '' }}">
        <p class="hint">{{ t("signup.email_hint") }}</p>
      </div>

      <div class="field">
        <label for="pw">{{ t("form.password") }}</label>
        <input id="pw" name="password" type="password" autocomplete="new-password" required
               minlength="10">
        <p class="hint">{{ t("signup.password_hint", n=10) }}</p>
      </div>

      {% if turnstile_sitekey %}
      <div class="cf-turnstile" data-sitekey="{{ turnstile_sitekey }}"
           data-action="signup" data-theme="auto"></div>
      <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
      {% endif %}

      <button>{{ t("signup.submit") }}</button>
    </form>
  </div>

  <p class="foot">{{ t("signup.have_account") }} <a href="/login">{{ t("signup.sign_in") }}</a></p>
  <p class="foot"><a href="/privacy">{{ t("nav.privacy") }}</a> &middot;
    <a href="/terms">{{ t("nav.terms") }}</a></p>
</div>
{% endblock %}