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

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

    {{#if success}}
        <div class="control-group">
          <div class="instructions">
            <p>{{i18n user.change_email.success}}</p>
          </div>
        </div>
    {{else}}
      {{#if error}}
        <div class="control-group">
          <div class="instructions">
            <div class='alert alert-error'>{{errorMessage}}</div>
          </div>
        </div>
      {{/if}}

      <div class="control-group">
        <label class="control-label">{{i18n user.email.title}}</label>
        <div class="controls">
          {{text-field value=newEmail id="change_email" classNames="input-xxlarge"}}
        </div>
        <div class='instructions'>
          {{#if taken}}
            {{i18n user.change_email.taken}}
          {{else}}
            {{i18n user.email.instructions}}
          {{/if}}

        </div>
      </div>

      <div class="control-group">
        <div class="controls">
            <button {{action "changeEmail"}} {{bind-attr disabled="saveDisabled"}} class="btn btn-primary">{{saveButtonText}}</button>
        </div>
      </div>
    {{/if}}

  </form>
</section>
