{% extends "setupwizard/_base.html" %}

{% block content_title %}Admin account creation{% endblock %}

{% block formfields %}
  <div class="form-group required">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <span class="input-group">
        <span class="input-group-addon">@</span>
        <input type="email" class="form-control" name="email"
               value="{{ data['email']|default('') }}" required />
      </span>
    </div>
  </div>

  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="name"
             value="{{ data['name']|default('') }}" />
    </div>
  </div>

  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="firstname"
             value="{{ data['firstname']|default('') }}" />
    </div>
  </div>


  <div class="form-group required">
    <label for="password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" name="password" 
             value="{{ data['password']|default('') }}"
             required />
    </div>
  </div>

  <div class="form-group required">
    <label for="confirm_password" class="col-sm-2 control-label">Confirm password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" name="confirm_password" 
             value="{{ data['confirm_password']|default('') }}"
             required />
    </div>
  </div>

  <script type="text/javascript">
   {
       var passwordInput = $('input[name="password"]'),
           passwordConfirm = $('input[name="confirm_password"]');

       passwordInput.on(
           'change',
           function onPasswordFill() { 
               passwordConfirm.val('');
               passwordConfirm.focus();
           });

       passwordConfirm.on(
           'change',
           function () {
               var pass = passwordInput.val(),
                   confirm = passwordConfirm.val();

               if (pass !== confirm) {
                   passwordConfirm.val('');
                   passwordInput.focus();
                   passwordInput.get(0).setCustomValidity('Passwords Don\'t Match');
               } else {
                   passwordInput.get(0).setCustomValidity('');
               }
           }
       );
   }
  </script>
{% endblock %}
