<h2 mat-dialog-title>{{ T.F.SYNC.D_DECRYPT_ERROR.TITLE | translate }}</h2>

<mat-dialog-content>
  <div class="content">
    <p>{{ T.F.SYNC.D_DECRYPT_ERROR.P1 | translate }}</p>

    <form
      #formEl="ngForm"
      (ngSubmit)="formEl.valid && updatePwAndResync()"
    >
      <mat-form-field>
        <mat-label>{{ T.F.SYNC.D_DECRYPT_ERROR.PASSWORD | translate }}</mat-label>
        <input
          [(ngModel)]="passwordVal"
          name="txtVal"
          matInput
          type="password"
        />
      </mat-form-field>

      <div class="option-section">
        <p
          class="option-label"
          [innerHTML]="T.F.SYNC.D_DECRYPT_ERROR.P2_FORGOT_PW | translate"
        ></p>
        <button
          mat-flat-button
          color="primary"
          (click)="formEl.valid && updatePwAndResync()"
          [disabled]="!formEl.valid"
          type="button"
        >
          <mat-icon>refresh</mat-icon>
          {{ T.F.SYNC.D_DECRYPT_ERROR.CHANGE_PW_AND_DECRYPT | translate }}
        </button>
      </div>
    </form>

    <hr class="divider" />

    <div class="option-section">
      <p
        class="option-label"
        [innerHTML]="T.F.SYNC.D_DECRYPT_ERROR.P3_PW_CHANGED | translate"
      ></p>
      <button
        mat-stroked-button
        color="warn"
        type="button"
        (click)="updatePWAndForceUpload()"
        [disabled]="!passwordVal"
      >
        <mat-icon>cloud_upload</mat-icon>
        {{ T.F.SYNC.D_DECRYPT_ERROR.BTN_OVER_WRITE_REMOTE | translate }}
      </button>
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <div class="wrap-buttons">
    <button
      (click)="cancel()"
      mat-button
      type="button"
    >
      {{ T.G.CANCEL | translate }}
    </button>
  </div>
</mat-dialog-actions>
