<h1 mat-dialog-title>
  {{ T.F.SYNC.FORM.SUPER_SYNC.L_CHANGE_ENCRYPTION_PASSWORD | translate }}
</h1>

<mat-dialog-content>
  <div class="warning-box">
    <mat-icon>warning</mat-icon>
    <p>{{ T.F.SYNC.FORM.SUPER_SYNC.CHANGE_PASSWORD_WARNING | translate }}</p>
  </div>

  <form
    #formEl="ngForm"
    (ngSubmit)="formEl.valid && isValid && confirm()"
  >
    <mat-form-field>
      <mat-label>{{ T.F.SYNC.FORM.SUPER_SYNC.L_NEW_PASSWORD | translate }}</mat-label>
      <input
        [(ngModel)]="newPassword"
        name="newPassword"
        matInput
        type="password"
        required
        minlength="8"
      />
      @if (newPassword.length > 0 && newPassword.length < 8) {
        <mat-error>{{
          T.F.SYNC.FORM.SUPER_SYNC.PASSWORD_MIN_LENGTH | translate
        }}</mat-error>
      }
    </mat-form-field>

    <mat-form-field>
      <mat-label>{{ T.F.SYNC.FORM.SUPER_SYNC.L_CONFIRM_PASSWORD | translate }}</mat-label>
      <input
        [(ngModel)]="confirmPassword"
        name="confirmPassword"
        matInput
        type="password"
        required
      />
      @if (confirmPassword.length > 0 && !passwordsMatch) {
        <mat-error>{{
          T.F.SYNC.FORM.SUPER_SYNC.PASSWORDS_DONT_MATCH | translate
        }}</mat-error>
      }
    </mat-form-field>
  </form>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button
    mat-button
    type="button"
    [disabled]="isLoading()"
    (click)="cancel()"
  >
    {{ T.G.CANCEL | translate }}
  </button>
  <button
    mat-flat-button
    color="warn"
    type="button"
    [disabled]="!isValid || isLoading()"
    (click)="confirm()"
  >
    @if (isLoading()) {
      <mat-spinner diameter="20"></mat-spinner>
    } @else {
      <ng-container>
        <mat-icon>lock_reset</mat-icon>
        {{ T.F.SYNC.FORM.SUPER_SYNC.BTN_CHANGE_PASSWORD | translate }}
      </ng-container>
    }
  </button>
</mat-dialog-actions>
