<div>
  <form name="changePassword" crm-ui-id-scope ng-submit="$ctrl.attemptChange()">

    <div crm-ui-field="{name: 'actorPassword', title: ts('Enter your current password')}">
      <input crm-ui-id="actorPassword" name="actorPassword" ng-model="$ctrl.actorPassword" class="crm-form-text"
        type=password autocomplete="current-password" />
    </div>

    <div crm-ui-field="{name: 'newPassword', title: ts('Enter a new password')}">
      <input crm-ui-id="newPassword" minlength=11 name="newPassword" ng-model="$ctrl.newPassword" class="crm-form-text"
        type=password autocomplete="new-password" />
    </div>

    <div crm-ui-field="{name: 'newPasswordAgain', title: ts('Re-enter new password')}">
      <input crm-ui-id="newPasswordAgain" name="newPasswordAgain" ng-model="$ctrl.newPasswordAgain"
        class="crm-form-text" type=password autocomplete="new-password" />
      <span class="crm-error"
        ng-show="$ctrl.newPasswordAgain && $ctrl.newPassword && $ctrl.newPassword !== $ctrl.newPasswordAgain">
        {{ts('Passwords do not match')}}
      </span>
    </div>

    <p>
      <button class=btn>{{ts('Change Password')}}</button>
    </p>

    <div ng-if="$ctrl.busy">{{$ctrl.busy}}</div>

    <div ng-if="$ctrl.pwnd" class="messages error no-popup">
      <h2>{{ts('Compromised password')}}</h2>
      <p>{{ts('The password you entered is known to have been included in data breaches. This means it can no longer be
        considered secure.')}}</p>
      <p>{{ts('Please choose a different password.')}}</p>
      <p>{{ts('Also, if you have used that password anywhere else, you should change it as soon as you can.')}}</p>
      <p>{{ts('For more information, see:')}} <a href="https://haveibeenpwned.com/FAQs">haveibeenpwned.com</a></p>
    </div>

    <div class=help>
      <h2>{{ts('Password tips')}}</h2>
      <ul>
        <li>
          <p>{{ts("Your password is likely the gateway to a lot of other people’s personal data. It only takes one user to have weak password to make a system insecure.")}}</p>
        </li>
        <li>
          <p>{{ts("Use of a password manager is highly recommended because we humans are not great at remembering a lot of unique passwords and we don’t like typing them out!")}}</p>
        </li>
        <li>
          <p>{{ts("A reasonable password is a mix of 11+ upper and lowercase letters, numbers, symbols, or a long phrase.")}}</p>
        </li>
        <li>
          <p>{{ts("Use a unique password; do not use a password that you use, or have used, anywhere else because if that system has been, or becomes compromised, your password may be used in future attacks.")}}</p>
        </li>
        <li>
          <p>{{ts("Did you know? An 8-character password — even with a mix of numbers, upper and lowercase letters and symbols can be cracked in under 5 minutes. A password with only lowercase letters needs to be 15+ characters long before it could be considered secure, and if it is made up of words, then it needs to be much longer.")}}</p>
        </li>
      </ul>
    </div>

  </form>

</div>
