{% extends "admin/change_form.html" %}
{% load i18n %}

{% block after_field_sets %}

<p>{% trans "First, enter a username and password. Then, you'll be able to edit more user options." %}</p>

<fieldset class="module aligned">

<div class="form-row">
  {{ form.username.errors }}
  {# TODO: get required class on label_tag #}
  <label for="id_username" class="required">{% trans 'Username' %}:</label> {{ form.username }}
  <p class="help">{{ form.username.help_text }}</p>
</div>

<div class="form-row">
  {{ form.first_name.errors }}
  {{ form.last_name.errors }}
 {# TODO: get required class on label_tag #}
  <div class="field-box">
  <label for="first_name" >{% trans 'First Name' %}:</label> {{ form.first_name }}
  <p class="help">{{ form.first_name.help_text }}</p>
  </div>  
  <div class="field-box">
  <label for="last_name" >{% trans 'Last Name' %}:</label> {{ form.last_name }}
  <p class="help">{{ form.last_name.help_text }}</p>
  </div>
</div>

<div class="form-row">
  {{ form.password1.errors }}
  {# TODO: get required class on label_tag #}
  <label for="id_password1" class="required">{% trans 'Password' %}:</label> {{ form.password1 }}
</div>

<div class="form-row">
  {{ form.password2.errors }}
  {# TODO: get required class on label_tag #}
  <label for="id_password2" class="required">{% trans 'Password (again)' %}:</label> {{ form.password2 }}
  <p class="help">{% trans 'Enter the same password as above, for verification.' %}</p>
</div>

<script type="text/javascript">document.getElementById("id_username").focus();</script>

</fieldset>
{% endblock %}