<h1 mat-dialog-title>
  <mat-icon aria-hidden="true">lock</mat-icon>
  {{ T.F.SYNC.D_ENTER_PASSWORD.TITLE | translate }}
</h1>

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

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

    @if (isSuperSync()) {
      <p class="force-overwrite-info">
        {{ T.F.SYNC.D_ENTER_PASSWORD.FORCE_OVERWRITE_INFO | translate }}
      </p>
    }
  </div>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button
    mat-button
    type="button"
    [disabled]="isLoading()"
    (click)="cancel()"
  >
    {{ T.G.CANCEL | translate }}
  </button>

  @if (isSuperSync()) {
    <button
      mat-flat-button
      color="warn"
      type="button"
      [disabled]="!passwordVal || isLoading()"
      (click)="forceOverwrite()"
    >
      <mat-icon aria-hidden="true">cloud_upload</mat-icon>
      {{ T.F.SYNC.D_ENTER_PASSWORD.BTN_FORCE_OVERWRITE | translate }}
    </button>
  }

  <button
    mat-flat-button
    color="primary"
    type="button"
    [disabled]="!passwordVal || isLoading()"
    (click)="saveAndSync()"
  >
    <mat-icon aria-hidden="true">sync</mat-icon>
    {{ T.F.SYNC.D_ENTER_PASSWORD.BTN_SAVE_AND_SYNC | translate }}
  </button>
</mat-dialog-actions>
