<h1 mat-dialog-title>
  <mat-icon class="warning-icon">warning</mat-icon>
  {{ T.F.SYNC.D_SYNC_IMPORT_CONFLICT.TITLE | translate }}
</h1>

<mat-dialog-content>
  <p class="message">
    {{
      T.F.SYNC.D_SYNC_IMPORT_CONFLICT.MESSAGE
        | translate: { filteredOpCount: data.filteredOpCount }
    }}
  </p>

  <p class="explanation">
    {{ T.F.SYNC.D_SYNC_IMPORT_CONFLICT.EXPLANATION | translate }}
  </p>

  <div class="import-info">
    <div class="info-row">
      <span class="label"
        >{{ T.F.SYNC.D_SYNC_IMPORT_CONFLICT.IMPORT_DATE | translate }}:</span
      >
      <span class="value">
        {{ data.localImportTimestamp | localeDate: 'shortDate' }}
        {{ data.localImportTimestamp | shortTime }}
      </span>
    </div>
    <div class="info-row">
      <span class="label"
        >{{ T.F.SYNC.D_SYNC_IMPORT_CONFLICT.FILTERED_CHANGES | translate }}:</span
      >
      <span class="value highlight">{{ data.filteredOpCount }}</span>
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <div class="wrap-buttons">
    <button
      (click)="close('CANCEL')"
      mat-button
    >
      {{ T.G.CANCEL | translate }}
    </button>
    <button
      (click)="close('USE_REMOTE')"
      color="primary"
      mat-stroked-button
    >
      <mat-icon>cloud_download</mat-icon>
      {{ T.F.SYNC.D_SYNC_IMPORT_CONFLICT.USE_REMOTE | translate }}
    </button>
    <button
      (click)="close('USE_LOCAL')"
      mat-stroked-button
    >
      <mat-icon>cloud_upload</mat-icon>
      {{ T.F.SYNC.D_SYNC_IMPORT_CONFLICT.USE_LOCAL | translate }}
    </button>
  </div>
</mat-dialog-actions>
