{%extends "base.html"%}
{%block title%}Register New User{%endblock%}
{%block content%}
<div class="container" style="min-width: 1250px;">
  <h3>Register User</h3>

  <form class="form-horizontal"
	action="{{url_for('oauth2.user.register_user')}}"
	method="POST" id="oauth2-register-user-form">
    <fieldset>
      <legend>Register User</legend>
      {{flash_me()}}
      <div class="form-group">
	<label class="col-xs-1 control-label" for="name"
	       style="text-align:left;">Name</label>
	<div style="margin-left:20px;" class="col-xs-4">
	  <input id="user_name" name="user_name" type="text"
		 placeholder="Your Name" size="50"
		 class="form-control" required="required" />
	</div>
      </div>

      <div class="form-group">
	<label class="col-xs-1 control-label" for="email_address"
	       style="text-align:left;">Email</label>
	<div style="margin-left:20px;" class="col-xs-4">
	  <input id="email_address" name="email_address" type="email"
		 placeholder="your@email.address" size="50"
		 class="form-control" required="required" />
	</div>
      </div>

      <div class="form-group">
	<label class="col-xs-1 control-label" for="password"
	       style="text-align:left;">Password</label>
	<div style="margin-left:20px;" class="col-xs-4">
	  <input id="password" name="password" type="password"
		 size="50" class="form-control"
		 placeholder="your password" required="required" />
	</div>
      </div>

      <div class="form-group">
	<label class="col-xs-1 control-label" for="confirm_password"
	       style="text-align:left;">Confirm Password</label>
	<div style="margin-left:20px;" class="col-xs-4">
	  <input id="confirm_password" name="confirm_password" type="password"
		 size="50" class="form-control" required="required"
		 placeholder="your password, again" />
	</div>
      </div>

      <div class="form-group">
	<div style="margin-left:20px;" class="col-xs-4 controls">
	  <input type="submit" class="btn btn-primary form-control" id="submit" name="submit"
		 value="Register" />
	</div>
      </div>
    </fieldset>
  </form>
</div>
{%endblock%}