<section class='user-content'>
  <form class="form-horizontal">

    <div class="control-group">
      <div class="controls">
        <h3>{{i18n 'user.change_username.title'}}</h3>
      </div>
    </div>

    {{#if error}}
      <div class="control-group">
        <div class="instructions">
          <div class='alert alert-error'>{{i18n 'user.change_username.error'}}</div>
        </div>
      </div>
    {{/if}}

    <div class="control-group">
      <label class="control-label">{{i18n 'user.username.title'}}</label>
      <div class="controls">
        {{text-field value=newUsername id="change_username" classNames="input-xxlarge" maxlength=maxLength}}
      </div>
      <div class='instructions'>
        {{#if taken}}
          {{i18n 'user.change_username.taken'}}
        {{/if}}
        <span>{{ errorMessage }}</span>
      </div>
    </div>

    <div class="control-group">
      <div class="controls">
          <button {{action "changeUsername"}} {{bind-attr disabled="saveDisabled"}} class="btn btn-primary">{{saveButtonText}}</button>
          {{#if saved}}{{i18n 'saved'}}{{/if}}
      </div>
    </div>

  </form>
</section>
