<ng-container *transloco="let t; read:'change-password'">
  <div class="card mt-2">
    <div class="card-body">
      <div class="card-title">
        <div class="container-fluid row mb-2">
          <div class="col-10 col-sm-11"><h4>{{t('password-label')}}</h4></div>
          <div class="col-1 text-end">
            <button class="btn btn-primary btn-sm" (click)="toggleViewMode()" *ngIf="(hasChangePasswordAbility | async)">{{isViewMode ? t('edit') : t('cancel')}}</button>
          </div>
        </div>
      </div>

      <ng-container *ngIf="isViewMode">
        <div class="container-fluid row">
          <span class="col-12">***************</span>
        </div>
      </ng-container>

      <div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">
        <ng-container>
          <div class="alert alert-danger" role="alert" *ngIf="resetPasswordErrors.length > 0">
            <div *ngFor="let error of resetPasswordErrors">{{error}}</div>
          </div>
          <form [formGroup]="passwordChangeForm">
            <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"
                     [class.is-invalid]="passwordChangeForm.get('oldPassword')?.invalid && passwordChangeForm.get('oldPassword')?.touched">
              <div id="inviteForm-validations" class="invalid-feedback" *ngIf="passwordChangeForm.dirty || passwordChangeForm.touched">
                <div *ngIf="passwordChangeForm.get('oldPassword')?.errors?.required">
                  {{t('required-field')}}
                </div>
              </div>
            </div>

            <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"
                     [class.is-invalid]="passwordChangeForm.get('password')?.invalid && passwordChangeForm.get('password')?.touched">
              <div id="new-password-validations" class="invalid-feedback" *ngIf="passwordChangeForm.dirty || passwordChangeForm.touched">
                <div *ngIf="password?.errors?.required">
                  {{t('required-field')}}
                </div>
              </div>
            </div>
            <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"
                     [class.is-invalid]="passwordChangeForm.get('confirmPassword')?.invalid && passwordChangeForm.get('confirmPassword')?.touched">
              <div id="confirm-password-validations" class="invalid-feedback" *ngIf="passwordChangeForm.dirty || passwordChangeForm.touched">
                <div *ngIf="!passwordsMatch">
                  {{t('passwords-must-match')}}
                </div>
                <div *ngIf="confirmPassword?.errors?.required">
                  {{t('required-field')}}
                </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-container>

        <ng-template #noPermission>
          <p>{{t('permission-error')}}</p>
        </ng-template>
      </div>

    </div>
  </div>
</ng-container>
