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

    <h1>{{:: ts('Reset Password')}}</h1>

    <p>{{:: ts('You will receive an email with instructions on how to reset your password.')}}</p>

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

    <button class=crm-button ng-click="$ctrl.requestPasswordResetEmail()" >{{:: ts('Request Password Reset')}}</button>
  </form>

  <div ng-if="$ctrl.resetSuccessfullySubmitted" class="help" >
    <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 >
    <h1>{{:: ts('Reset Password')}}</h1>

    <div class="input-wrapper">
      <label crm-ui-for="newPassword">{{:: ts('Enter a new password')}}</label>
      <input
          crm-ui-id="newPassword"
          name="newPassword"
          ng-model="$ctrl.newPassword"
          class="crm-form-text form-control"
          type=password
          />
    </div>
    <div class="input-wrapper">
      <label crm-ui-for="newPasswordAgain">{{:: ts('Re-enter new password')}}</label>
      <input
          crm-ui-id="newPasswordAgain"
          name="newPasswordAgain"
          ng-model="$ctrl.newPasswordAgain"
          class="crm-form-text form-control"
          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=crm-button ng-click="$event.preventDefault();$ctrl.attemptChange()" ng-disabled="$ctrl.formSubmitted">{{:: ts('Change Password')}}</button>
  </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>

