{#-
  register.html — self-service signup. Inherits the auth contract.
  Backend: POST /register -> auth.register(email, password) (app.py).
  The backend receives `email` + `password` only; the confirm field is a
  client-side UX guard (checked in the inline script, which carries the nonce).
-#}
{% extends "layout_auth.html" %}

{% block title %}Create account{% endblock %}

{% block eyebrow %}<span class="fbb-eyebrow">Account access</span>{% endblock %}
{% block heading %}Create your account{% endblock %}
{% block subheading %}
  <p class="fbb-muted">Start forging in a couple of steps.</p>
{% endblock %}

{% block auth_body %}
  <form id="register-form" class="fbb-stack" method="post" action="{{ url_for('register') }}" data-fbb-loading data-fbb-veil>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="fbb-field">
      <label class="fbb-label" for="email">Email</label>
      <input class="fbb-input" id="email" name="email" type="email"
             autocomplete="email" required autofocus placeholder="you@example.com">
    </div>

    <div class="fbb-field">
      <label class="fbb-label" for="password">Password</label>
      <div class="fbb-input-group">
        <input class="fbb-input" id="password" name="password" type="password"
               autocomplete="new-password" required minlength="{{ password_min_length }}" placeholder="At least {{ password_min_length }} characters">
        <button class="fbb-input-affix" type="button" data-fbb-reveal="#password" aria-label="Show password">
          <svg class="fbb-icon"><use href="{{ sprite }}#eye"></use></svg>
        </button>
      </div>
    </div>

    <div class="fbb-field" id="confirm-field">
      <label class="fbb-label" for="confirm">Confirm password</label>
      <input class="fbb-input" id="confirm" type="password"
             autocomplete="new-password" required placeholder="Repeat your password">
      <span class="fbb-error fbb-hidden" id="confirm-error">
        <svg class="fbb-icon fbb-icon-sm"><use href="{{ sprite }}#alert-circle"></use></svg>
        Passwords don't match.
      </span>
    </div>

    <button class="fbb-btn fbb-btn-primary fbb-btn-block" type="submit">
      Create account
      <svg class="fbb-icon"><use href="{{ sprite }}#arrow-right"></use></svg>
    </button>
  </form>
{% endblock %}

{% block auth_foot %}
  Already have an account? <a href="{{ url_for('login') }}">Sign in</a>
{% endblock %}

{% block scripts %}
  {#- Inline script MUST carry the nonce (CSP script-src 'self' + nonce). -#}
  <script nonce="{{ csp_nonce() }}">
    (function () {
      var form = document.getElementById("register-form");
      var pw = document.getElementById("password");
      var confirm = document.getElementById("confirm");
      var field = document.getElementById("confirm-field");
      var error = document.getElementById("confirm-error");
      form.addEventListener("submit", function (e) {
        if (pw.value !== confirm.value) {
          e.preventDefault();
          field.classList.add("is-invalid");
          error.classList.remove("fbb-hidden");
          confirm.focus();
          // No manual undo needed: fabbro.js checks defaultPrevented and never
          // raises (or promptly lowers) the veil on a cancelled submit.
        }
      });
      confirm.addEventListener("input", function () {
        if (confirm.value === pw.value) {
          field.classList.remove("is-invalid");
          error.classList.add("fbb-hidden");
        }
      });
    })();
  </script>
{% endblock %}