<div>
  <h1>Forgotten Password</h1>
  <form name="changePassword" crm-ui-id-scope>

    <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
      />
    </div>

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

    <button class=btn ng-click="$ctrl.attemptChange()" >{{ts('Change Password')}}</button>

  </form>
  <div ng-if="$ctrl.busy" >{{$ctrl.busy}}</div>
  <div ng-if="$ctrl.pwnd"  class="messages error no-popup">
    <h2>{{ts('Known 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>
