<div class="modal fade" id="change-password-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Change Password</h4>
      </div>

      <form action="{% url 'change_password' pk=user.pk %}" method="POST" id="change-password-form">{% csrf_token %}
        <div class="modal-body">
          {% for field in change_password_form %}
          <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            {{ field.errors }}
          </div>
          {% endfor %}
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

          <button type="submit" class="btn btn-primary">
            Change Password
          </button>
        </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
$(document).ready(function() {
  $('#change-password-form').ajaxForm({
    'dataType': 'json',
    'resetForm': true,
    'success': function(data) {
      if(data.success) {
        // Hide Modal
        $('#change-password-modal').modal('hide');

        $('body > .container').prepend('\
          <div class="alert alert-success alert-dismissable">\
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>\
            Password changed successfully.\
          </div>\
        ');
      } else {
        alert("Sorry, an error occored: " + data.error);
      }
    }
  });
});
</script>
