<div
  *ngIf="
    isShowTranslationPreview &&
    !!translationPreviewInfo &&
    !!translationPreviewInfo.previewInfo &&
    !!translationPreviewInfo.previewInfo.translation
  "
  class="translation-preview"
>
  <div class="translation-section">
    <span class="translate-text">
      {{ translationPreviewInfo.previewInfo.translation }}
    </span>
    <button
      mat-stroked-button
      class="btn-translation-send bg-accent-color"
      (click)="onClickSendTranslationMessage(translationPreviewInfo)"
    >
      <!--{{ 'chat.send' | translate }}-->
      <svg
        _ngcontent-smu-c52=""
        fill="none"
        height="20"
        stroke="currentColor"
        stroke-linecap="butt"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path _ngcontent-smu-c52="" d="M12 19V6M5 12l7-7 7 7"></path>
      </svg>
    </button>
    <button
      class="btn-close-translatebox bg-accent-color"
      aria-label="Close"
      (click)="onClickTranslationCancel()"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-x"
      >
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>

  <!--<span class="btn-close">
    <button
      mat-button
      matSuffix
      mat-icon-button
      aria-label="Close"
      (click)="onClickTranslationCancel()"
    >
      <mat-icon>close</mat-icon>
    </button>
  </span>-->
</div>
<div>
  <form
    name="translationForm"
    [formGroup]="translationForm"
    class="translationForm "
  >
    <mat-label class="text-language">
      {{ 'common.translations.targetLanguage' | translate }}</mat-label
    >
    <mat-form-field class="select-language">
      <mat-select
        formControlName="destType"
        (selectionChange)="onChangeSelection($event)"
      >
        <mat-option value="">{{
          'common.translations.noTranslation' | translate
        }}</mat-option>
        <mat-option *ngFor="let dest of translationDestList" [value]="dest.key"
          >{{ dest.text }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <div _ngcontent-xkt-c1="" class="app-layout-native-title-bar-spacer"></div>
    <mat-slide-toggle
      labelPosition="before"
      class="simpleview"
      [checked]="simpleView"
      (change)="onChangToggleSimpleview($event)"
      >{{ 'common.translations.simpleView' | translate }}</mat-slide-toggle
    >
    <mat-slide-toggle
      labelPosition="before"
      class="preview"
      [checked]="preView"
      (change)="onChangTogglePreview($event)"
      >{{ 'common.translations.preview' | translate }}</mat-slide-toggle
    >
  </form>
</div>
