<div class="container password-reset clearfix">
  <div class="pull-left col-image">
    <img
      src={{this.lockImageUrl}}
      class="password-reset-img"
      alt={{i18n "user.change_password.emoji"}}
    />
  </div>

  <div class="pull-left col-form">
    {{#if this.successMessage}}
      <p>{{this.successMessage}}</p>

      {{#if this.requiresApproval}}
        <p>{{i18n "login.not_approved"}}</p>
      {{else}}
        {{#unless this.redirected}}
          <a
            class="btn"
            href={{this.redirectHref}}
            {{on "click" this.done}}
          >{{this.continueButtonText}}</a>
        {{/unless}}
      {{/if}}
    {{else}}
      <form>
        {{#if this.securityKeyOrSecondFactorRequired}}
          {{#if this.errorMessage}}
            <div class="alert alert-error">{{this.errorMessage}}</div>
            <br />
          {{/if}}
          {{#if this.securityKeyRequired}}
            <SecurityKeyForm
              @allowedCredentialIds={{this.model.allowed_credential_ids}}
              @challenge={{this.model.security_key_challenge}}
              @showSecurityKey={{this.model.security_key_required}}
              @showSecondFactor={{false}}
              @secondFactorMethod={{this.secondFactorMethod}}
              @otherMethodAllowed={{this.otherMethodAllowed}}
              @action={{action "authenticateSecurityKey"}}
            />
          {{else}}
            <SecondFactorForm
              @secondFactorMethod={{this.secondFactorMethod}}
              @secondFactorToken={{this.secondFactorToken}}
              @backupEnabled={{this.backupEnabled}}
              @isLogin={{false}}
            >
              <SecondFactorInput
                @value={{this.secondFactorToken}}
                @inputId="second-factor"
                @secondFactorMethod={{this.secondFactorMethod}}
                @backupEnabled={{this.backupEnabled}}
              />
            </SecondFactorForm>
          {{/if}}
          {{#unless this.securityKeyRequired}}
            <DButton
              @action={{action "submit"}}
              @class="btn-primary"
              @label="submit"
              @type="submit"
            />
          {{/unless}}
        {{else}}
          <h2>{{i18n "user.change_password.choose"}}</h2>

          <div class="input">
            <PasswordField
              @value={{this.accountPassword}}
              @type={{if this.maskPassword "password" "text"}}
              @id="new-account-password"
              @capsLockOn={{this.capsLockOn}}
              @autofocus="autofocus"
            />
            <TogglePasswordMask
              @maskPassword={{this.maskPassword}}
              @togglePasswordMask={{this.togglePasswordMask}}
            />
            <InputTip @validation={{this.passwordValidation}} />
          </div>

          <div class="instructions">
            <div class="caps-lock-warning {{unless this.capsLockOn 'hidden'}}">
              {{d-icon "exclamation-triangle"}}
              {{i18n "login.caps_lock_warning"}}
            </div>
          </div>

          <DButton
            @action={{action "submit"}}
            @class="btn-primary"
            @label="user.change_password.set_password"
            @type="submit"
          />
        {{/if}}
      </form>
    {{/if}}
  </div>
</div>