<div>
  <!-- without a token, we offer for them to generate one. -->
  <form name="requestLink" crm-ui-id-scope
    ng-if="!$ctrl.formSubmitted && !$ctrl.token">

    <div crm-ui-field="{name: 'identifier', title: ts('Enter the username or email on your account')}">
      <input
        crm-ui-id="identifier"
        name="identifier"
        ng-model="$ctrl.identifier"
        class="crm-form-text"
        type=text
      />
    </div>

    <button ng-click="$ctrl.sendPasswordReset()" >{{ts('Send Password Reset')}}</button>
  </form>
  <div ng-if="$ctrl.resetSuccessfullySubmitted" >
    <p>{{ts('Thanks. If your username/email matched an active account, we will email you with a special link to provide a new password.')}}</p>
    <p>{{ts('The link must be used within an hour, and can only be used once.')}}</p>
  </div>

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

  <!-- without a token, we offer for them to generate one. -->
  <form ng-if="$ctrl.token && $ctrl.token !== 'invalid' && !$ctrl.formSubmitted" name="resetPassword" crm-ui-id-scope >
    <div ng=if="$ctrl.token !== 'invalid'" >
      <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 ng-click="$ctrl.attemptChange()" ng-disabled="$ctrl.formSubmitted">{{ts('Change Password')}}</button>
    </div>
  </form>

  <div ng-if="$ctrl.token === 'invalid'" >
    <p>{{ts("This password reset link has expired or is otherwise invalid.")}}</p>
    <p><a href ng-click="$ctrl.completeReset()">{{ts('Send new password reset link')}}</a></p>
  </div>

</div>

