<DSection @pageClass="user-preferences" @tagName="">
  <section class="user-preferences solo-preference">
    <form class="form-horizontal">

      <div class="control-group">
        <div class="controls">
          <h3>{{i18n
              (if this.new "user.add_email.title" "user.change_email.title")
            }}</h3>
        </div>
      </div>

      {{#if this.success}}
        <div class="control-group">
          <div class="controls">
            <div class="instructions">
              <p>{{this.successMessage}}</p>
            </div>
          </div>
        </div>
      {{else}}
        {{#if this.error}}
          <div class="control-group">
            <div class="controls">
              <div class="alert alert-error">{{this.errorMessage}}</div>
            </div>
          </div>
        {{/if}}

        <div class="control-group">
          <label class="control-label">{{i18n "user.email.title"}}</label>
          <div class="controls">
            <TextField
              @value={{this.newEmail}}
              @id="change-email"
              @classNames="input-xxlarge"
              @autofocus="autofocus"
            />
            <InputTip @validation={{this.emailValidation}} />
          </div>
          <div class="controls">
            <div class="instructions">
              {{#if this.taken}}
                {{i18n "user.change_email.taken"}}
              {{else}}
                {{i18n "user.email.instructions"}}
              {{/if}}
            </div>
          </div>
        </div>

        <div class="control-group">
          <div class="controls">
            <DButton
              @class="btn-primary"
              @action={{action "saveEmail"}}
              @type="submit"
              @disabled={{this.saveDisabled}}
              @translatedLabel={{this.saveButtonText}}
            />
          </div>
        </div>
      {{/if}}

    </form>
  </section>
</DSection>