<ng-container *transloco="let t; prefix:'change-password'">
  <app-setting-item [title]="t('password-label')"
                    [subtitle]="hasChangePasswordAbility() ? '' : t('permission-error')"
                    [canEdit]="hasChangePasswordAbility()"
                    [isEditMode]="isEditMode" (isEditModeChange)="updateEditMode($event)"
  >
    <ng-template #view>
      <span class="col-12">•••••••••••••••</span>
    </ng-template>
    <ng-template #edit>
      @if (resetPasswordErrors.length > 0) {
        <div class="alert alert-danger" role="alert">
          @for(error of resetPasswordErrors; track error) {
            <div>{{error}}</div>
          }
        </div>
      }

      <form [formGroup]="passwordChangeForm">
        @if (passwordChangeForm.get('oldPassword'); as formControl) {
          <div class="mb-3">
            <label for="oldpass" class="form-label">{{t('current-password-label')}}</label>
            <input class="form-control custom-input" type="password" id="oldpass" formControlName="oldPassword" autocomplete="current-password"
                   [class.is-invalid]="formControl.invalid && formControl.touched" aria-describedby="oldpass-validations">
            @if (passwordChangeForm.dirty || passwordChangeForm.touched) {
              <div id="oldpass-validations" class="invalid-feedback">
                @if (formControl.errors?.required) {
                  <div>{{t('required-field')}}</div>
                }
              </div>
            }
          </div>
        }

        @if (passwordChangeForm.get('password'); as formControl) {
          <div class="mb-3">
            <label for="new-password">{{t('new-password-label')}}</label>
            <input class="form-control" type="password" id="new-password" formControlName="password" aria-describedby="new-password-validations"
                   autocomplete="new-password"
                   [class.is-invalid]="formControl.invalid && formControl.touched">
            @if (passwordChangeForm.dirty || passwordChangeForm.touched) {
              <div id="new-password-validations" class="invalid-feedback">
                @if (formControl.errors?.required) {
                  <div>{{t('required-field')}}</div>
                }
              </div>
            }
          </div>
        }

        @if (passwordChangeForm.get('confirmPassword'); as formControl) {
          <div class="mb-3">
            <label for="confirm-password">{{t('confirm-password-label')}}</label>
            <input class="form-control" type="password" id="confirm-password" formControlName="confirmPassword" aria-describedby="confirm-password-validations"
                   autocomplete="new-password"
                   [class.is-invalid]="passwordChangeForm.get('confirmPassword')?.invalid && passwordChangeForm.get('confirmPassword')?.touched">
            @if (passwordChangeForm.dirty || passwordChangeForm.touched) {
              <div id="confirm-password-validations" class="invalid-feedback">
                @if (formControl.errors?.required) {
                  <div>{{t('required-field')}}</div>
                }
                @if (!passwordsMatch) {
                  <div>{{t('passwords-must-match')}}</div>
                }
              </div>
            }
          </div>
        }
        <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
          <button type="button" class="flex-fill btn btn-secondary me-2" aria-describedby="password-panel" (click)="resetPasswordForm()">{{t('reset')}}</button>
          <button type="submit" class="flex-fill btn btn-primary" aria-describedby="password-panel" (click)="savePasswordForm()" [disabled]="!passwordChangeForm.valid || !(passwordChangeForm.dirty || passwordChangeForm.touched)">{{t('save')}}</button>
        </div>
      </form>

    </ng-template>
  </app-setting-item>
</ng-container>
