<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 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">
        {{textField value=newUsername id="change_username" classNames="input-xxlarge" maxlength="15"}}
      </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>
