<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="theme-color" content="#0EA5E9" />
  <title>Create account — takedowns</title>
  <link rel="stylesheet" href="/public/css/glass.css?v=2-light" />
</head>
<body>
  <div class="auth">
    <div class="panel">
      <h1>Create account</h1>
      <p class="sub">Start with the Free plan. <a href="/login">I already have one</a></p>

      <div id="flash"></div>

      <form id="regForm">
        <div class="field">
          <label>Full name</label>
          <input name="name" type="text" autocomplete="name" required minlength="2" />
        </div>
        <div class="field">
          <label>Email</label>
          <input name="email" type="email" autocomplete="email" required />
        </div>
        <div class="field">
          <label>Password</label>
          <input name="password" type="password" autocomplete="new-password" required minlength="10" />
          <small class="muted">Min 10 characters, must include a number and a symbol.</small>
        </div>
        <button type="submit" style="width:100%">Create account</button>
      </form>
    </div>
  </div>
  <script>
    function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
    function flash(type, msg) {
      document.getElementById('flash').innerHTML = `<div class="flash ${esc(type)}">${esc(msg)}</div>`;
    }
    document.getElementById('regForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const body = Object.fromEntries(new FormData(e.target));
      const r = await fetch('/auth/register', {
        method: 'POST', headers: { 'content-type': 'application/json' },
        body: JSON.stringify(body),
      });
      const data = await r.json();
      if (!r.ok) { flash('err', data.message || data.error || 'Could not register'); return; }
      flash('ok', data.message || 'Account created.');
      setTimeout(() => location.href = '/dashboard/', 1500);
    });
  </script>
</body>
</html>
