<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <title>Candid - User Registration</title>

  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="">
  <meta name="author" content="Juju team">
  <link rel="shortcut icon" href="../../static/favicon.ico">
  <link rel="stylesheet" href="../../static/css/vanilla.css">
</head>

<body>
  <div class="p-strip">
    <div class="row">
      <div class="col-2 col-start-large-6 col-small-2 col-medium-3">
        <img src="../../static/images/logo-canonical-aubergine.svg" alt="Canonical" />
      </div>
    </div>
  </div>
  <div class="p-strip">
    <div class="row">
      <div class="col-6 col-start-large-4">
        <div class="p-card--highlighted">
          <div class="p-card__thumbnail">
            <h1 class="p-heading--four">User Registration</h1>
          </div>
          <hr class="u-sv1">
          {{if .Error}}
            <div class="p-notification--negative">
              <p class="p-notification__response">
                <span class="p-notification__status">Error:</span>{{.Error}}
              </p>
            </div>
          {{end}}
          <form class="p-form" method="post" action="register">
            <input type="hidden" name="state" value="{{.State}}">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" class="js_username_input" autocomplete="off">
            <p class="p-form-help-text"><span class="js_username_output"></span>@{{.Domain}}</p>
            <label for="fullname">Full name</label>
            <input type="text" id="fullname" name="fullname" autocomplete="off" value="{{.FullName}}">
            <label for="email">Email address</label>
            <input type="text" id="email" name="email" autocomplete="off" value="{{.Email}}">
            <br /><br />
            <a href="/login" class="p-button--neutral u-float-left u-no-margin--bottom">Back</a>
            <button type="submit" class="p-button--positive u-float-right u-no-margin--bottom">Register</button>
          </form>
        </div>
        <div class="login__message"></div>
      </div>
    </div>
  </div>

  <script type="application/javascript">
    var username_input = document.querySelector('.js_username_input');
    var username_output = document.querySelector('.js_username_output');
    username_input.addEventListener('keyup', function(e) {
      var val = this.value;
      username_output.innerHTML = val;
    });
  </script>
</body>
</html>
