<section class="user-preferences  solo-preference">
  <form class="form-horizontal">

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

    <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 autofocus="autofocus" insert-newline="changeUsername"}}
      </div>
      <div class="instructions controls">
        <p>
          {{#if taken}}
            {{i18n "user.change_username.taken"}}
          {{/if}}
          <span>{{errorMessage}}</span>
        </p>
      </div>
    </div>

    <div class="control-group">
      <div class="controls">
        {{#d-button
          class="btn-primary"
          action=(action "changeUsername")
          type="submit"
          disabled=saveDisabled
        }}
          {{saveButtonText}}
        {{/d-button}}

        {{#if saved}}{{i18n "saved"}}{{/if}}
      </div>
    </div>

  </form>
</section>
