<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]="oldPwd.isInvalid"
          [invalidText]="oldPasswordInvalid">
          Old Password
          <input cdsPassword
                 cdValidate
                 #oldPwd="cdValidate"
                 formControlName="oldpassword"
                 autocomplete="oldpassword"
                 [invalid]="oldPwd.isInvalid"
                 id="oldpassword"
                 autofocus>
        </cds-password-label>
      </div>
      <div cdsRow
           class="form-item">
        <cds-password-label
          [invalid]="newPwd.isInvalid"
          [invalidText]="newPasswordInvalid"
          [helperText]="passwordPolicyHelpText">
          New Password
          <input cdsPassword
                 cdValidate
                 #newPwd="cdValidate"
                 formControlName="newpassword"
                 autocomplete="newpassword"
                 [invalid]="newPwd.isInvalid"
                 id="newpassword">
        </cds-password-label>
      </div>
      <div cdsRow
           class="form-item">
        <cds-password-label
          [invalid]="confirmPwd.isInvalid"
          [invalidText]="confirmNewPasswordInvalid">
          Confirm New Password
          <input cdsPassword
                 cdValidate
                 #confirmPwd="cdValidate"
                 formControlName="confirmnewpassword"
                 autocomplete="confirmnewpassword"
                 [invalid]="confirmPwd.isInvalid"
                 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 #validationErrors
             let-control="control">
@if (control.errors) {
@for (err of control.errors | keyvalue; track err.key) {
<span class="invalid-feedback">{{ INVALID_TEXTS[err.key] }}</span>
}
}
</ng-template>

<ng-template #oldPasswordInvalid>
  <ng-container *ngTemplateOutlet="validationErrors; context: { control: userForm.get('oldpassword') }"></ng-container>
</ng-template>

<ng-template #newPasswordInvalid>
  <ng-container *ngTemplateOutlet="validationErrors; context: { control: userForm.get('newpassword') }"></ng-container>
</ng-template>

<ng-template #confirmNewPasswordInvalid>
  <ng-container *ngTemplateOutlet="validationErrors; context: { control: userForm.get('confirmnewpassword') }"></ng-container>
</ng-template>
