<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Sign-up</title>
  <style>
  * { box-sizing: border-box; }
  body { margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  html { width: 100%; height: 100%; overflow: hidden; }
  body {
    font-size: 18px;
    width: 18em;
    color: #fff;
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
  }
  a { color: inherit; }
  .alert { background-color: #fee; color: #000; padding: 10px 0.5em 5px 0.5em; }
  label, input, button { font: inherit; }
  input { padding: 0 5px; }
  button, input { display: block; width: 100%; margin: 0.5em 0; }
  </style>
</head>
<body>
  <h1>Signup</h1>
  {% if error %}
    <div class="alert">
      <h2>Error logging in</h2>
      <p><strong>code</strong> {{ error['code'] }}</p>
      <p><strong>error</strong> {{ error['error'] }}</p>
    </div>
  {% end %}
  {% if not handler.forgot %}
    <div class="alert">
      <p><code>forgot:</code> is missing in the configuration.</p>
    </div>
  {% else %}
    <p>Fill in your user ID and email. We'll create the account and email a password link.</p>
    <form method="POST">
      <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
      <label for="{{ handler.user.arg }}">user</label>
      <input name="{{ handler.user.arg }}" placeholder="Your username">
      <label for="{{ handler.forgot.arg }}">email</label>
      <input name="{{ handler.forgot.arg }}" type="email" placeholder="Your email">
      {% for field, column in handler.signup.columns.items() %}
        <label for="{{ field }}">{{ field }}</label>
        <input name="{{ field }}">
      {% end %}
      <button type="submit">Signup</button> (You will get an email)
    </form>
  {% end %}
</body>
</html>
