<form [formGroup]="userForm"
      novalidate>
  <div cdsGrid
       [useCssGrid]="true"
       [narrow]="true"
       [fullWidth]="true">
    <div cdsCol
         [columnNumbers]="{sm: 4, md: 8}">
      <div cdsRow
           class="form-heading">
        <h3>{{ action | titlecase }} {{ resource | upperFirst }}</h3>
        <cd-help-text [formAllFieldsRequired]="true"></cd-help-text>
      </div>
      <div cdsRow
           class="form-item">
        <cds-password-label
          [invalid]="!userForm.controls.oldpassword.valid && userForm.controls.oldpassword.dirty"
          [invalidText]="oldPasswordInvalid">
          Old Password
          <input cdsPassword
                 formControlName="oldpassword"
                 autocomplete="oldpassword"
                 [invalid]="!userForm.controls.oldpassword.valid && userForm.controls.oldpassword.dirty"
                 id="oldpassword"
                 autofocus>
        </cds-password-label>
      </div>
      <div cdsRow
           class="form-item">
        <cds-password-label
          [invalid]="!userForm.controls.newpassword.valid && userForm.controls.newpassword.dirty"
          [invalidText]="newPasswordInvalid"
          [helperText]="passwordPolicyHelpText">
          New Password
          <input cdsPassword
                 formControlName="newpassword"
                 autocomplete="newpassword"
                 [invalid]="!userForm.controls.newpassword.valid && userForm.controls.newpassword.dirty"
                 id="newpassword">
        </cds-password-label>
      </div>
      <div cdsRow
           class="form-item">
        <cds-password-label
          [invalid]="!userForm.controls.confirmnewpassword.valid && userForm.controls.confirmnewpassword.dirty"
          [invalidText]="confirmNewPasswordInvalid">
          Confirm New Password
          <input cdsPassword
                 formControlName="confirmnewpassword"
                 autocomplete="confirmnewpassword"
                 [invalid]="!userForm.controls.confirmnewpassword.valid && userForm.controls.confirmnewpassword.dirty"
                 id="confirmnewpassword">
        </cds-password-label>
      </div>
      <div cdsRow>
        <cd-form-button-panel (submitActionEvent)="onSubmit()"
                              [form]="userForm"
                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
                              wrappingClass="text-right form-button"></cd-form-button-panel>
      </div>
    </div>
  </div>
</form>

<ng-template #oldPasswordInvalid>
  <span class="invalid-feedback"
        *ngIf="userForm.showError('oldpassword', null, 'required')"
        i18n>{{INVALID_TEXTS['required']}}</span>
  <span class="invalid-feedback"
        *ngIf="userForm.showError('oldpassword', null, 'notmatch')"
        i18n>{{INVALID_TEXTS['notmatch']}}</span>
</ng-template>

<ng-template #newPasswordInvalid>
  <span class="invalid-feedback"
        *ngIf="userForm.showError('newpassword', null, 'required')"
        i18n>{{INVALID_TEXTS['required']}}</span>
  <span class="invalid-feedback"
        *ngIf="userForm.showError('newpassword', null, 'notmatch')"
        i18n>{{INVALID_TEXTS['notmatch']}}</span>
  <span class="invalid-feedback"
        *ngIf="userForm.showError('newpassword', null, 'passwordPolicy')"
        i18n>{{INVALID_TEXTS['passwordPolicy']}}</span>
</ng-template>

<ng-template #confirmNewPasswordInvalid>
  <span class="invalid-feedback"
        *ngIf="userForm.showError('confirmnewpassword', null, 'required')"
        i18n>{{INVALID_TEXTS['required']}}</span>
  <span class="invalid-feedback"
        *ngIf="userForm.showError('confirmnewpassword', null, 'match')"
        i18n>{{INVALID_TEXTS['match']}}</span>
</ng-template>
