@if (user(); as user) {
  <mat-card class="half-width">
    <mat-card-header>
      <mat-card-title i18n>Change Password</mat-card-title>
    </mat-card-header>
    <mat-divider></mat-divider>
    <mat-card-content>
      <form
        [formGroup]="form"
        (ngSubmit)="onSubmit()"
        id="change-password-form"
      >
        <gt-form-error [errors]="formErrors()"></gt-form-error>
        @if (user.hasPasswordAuth) {
          <mat-form-field class="full-width first-field" appearance="outline">
            <mat-label i18n>Current Password</mat-label>
            <input
              matInput
              type="password"
              formControlName="current_password"
            />
            <mat-error>
              @if (current_password?.errors?.required) {
                <span i18n
                  >Your current is required to change your password</span
                >
              }
              @if (current_password?.errors?.serverError) {
                <span>{{ current_password?.errors?.serverError }}</span>
              }
            </mat-error>
          </mat-form-field>
        }
        <mat-form-field
          class="full-width"
          [class.first-field]="!user.hasPasswordAuth"
          appearance="outline"
        >
          <mat-label i18n>New Password</mat-label>
          <input matInput type="password" formControlName="new_password" />
          <mat-error>
            @if (new_password?.errors?.minlength) {
              <span i18n
                >Your password should be at least 8 characters long</span
              >
            }
            @if (new_password?.errors?.required) {
              <span i18n>Type in your new password</span>
            }
            @if (new_password?.errors?.serverError) {
              <span>{{ new_password?.errors?.serverError }}</span>
            }
          </mat-error>
        </mat-form-field>
        <mat-form-field
          class="full-width"
          data-cy="confirm-password"
          appearance="outline"
        >
          <mat-label i18n>Confirm New Password</mat-label>
          <input
            matInput
            type="password"
            formControlName="new_password2"
            gtInputMatcher="new_password"
          />
          <mat-error>
            @if (new_password2?.errors?.required) {
              <span i18n>Type in your new password</span>
            }
            @if (new_password2?.errors?.notEqual) {
              <span i18n>Your passwords don't match</span>
            }
            @if (new_password2?.errors?.serverError) {
              <span>{{ new_password2?.errors?.serverError }}</span>
            }
          </mat-error>
        </mat-form-field>
        <gt-loading-button
          i18n-buttonText
          buttonText="Change Password"
          [loading]="loading()"
        >
        </gt-loading-button>
      </form>
    </mat-card-content>
  </mat-card>
  <section></section>
}