@()(implicit context: gitbucket.core.controller.Context)
@gitbucket.core.html.main("Create your account"){
<div class="content-wrapper main-center">
  <div class="content body">
    <h2>Create your account</h2>
    <form action="@context.path/register" method="POST" validate="true" autocomplete="off">
      <div class="row">
        <div class="col-md-6">
          <fieldset>
            <label for="userName" class="strong">Username:</label>
            <input type="text" name="userName" id="userName" value="" class="form-control" autofocus/>
            <span id="error-userName" class="error"></span>
          </fieldset>
          <fieldset>
            <label for="password" class="strong">
              Password:
            </label>
            <input type="password" name="password" id="password" class="form-control" value=""/>
            <span id="error-password" class="error"></span>
          </fieldset>
          <fieldset>
            <label for="fullName" class="strong">Full Name:</label>
            <input type="text" name="fullName" id="fullName" class="form-control" value=""/>
            <span id="error-fullName" class="error"></span>
          </fieldset>
          <fieldset>
            <label for="mailAddress" class="strong">Mail Address:</label>
            <input type="text" name="mailAddress" id="mailAddress" class="form-control" value=""/>
            <span id="error-mailAddress" class="error"></span>
          </fieldset>
          <div id="extraMailAddresses">
            <span class="strong">Additional Mail Address:</span>
          </div>
          <fieldset>
            <label for="url" class="strong">URL (optional):</label>
            <input type="text" name="url" id="url" class="form-control" value=""/>
            <span id="error-url" class="error"></span>
          </fieldset>
          <fieldset>
            <label for="description" class="strong">Bio (optional):</label>
            <textarea name="description" id="description" class="form-control"></textarea>
            <span id="error-description" class="error"></span>
          </fieldset>
        </div>
        <div class="col-md-6">
          <fieldset>
            <label for="avatar" class="strong">Image (optional):</label>
            @gitbucket.core.helper.html.uploadavatar(None)
          </fieldset>
        </div>
      </div>
      <fieldset class="border-top">
        <input type="submit" class="btn btn-success" value="Create account"/>
      </fieldset>
    </form>
  </div>
</div>
<script>
  $(function() {
    addExtraMailAddress();
    $('#extraMailAddresses').on('change', '.extraMailAddress', checkExtraMailAddress);
  });
</script>
}