ng-implementation/sae-csc/src/app/shared/translate-texts/translate-texts.html

<div class="translate-texts is-{{disabled? 'disabled' : 'enabled'}}">

  <div [ngClass]="{
  'is-focused' : fromTextFocused,
  'has-shadow' : !researchLaunched,
  }" id="fromText">

    @if (!fileIsUploaded || !appState.fromText.length || !fromTextFocused) {
      <!--      @if (appState.fromText.length == 0) {-->
      <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
            <span class="label">
          Upload .csv file
        </span>
        <i class="ri-upload-cloud-2-line"></i>
      </button>
      <!--      }-->
        <!--          hidden text input-->
      <input #fileUpload
             accept=".csv"
             (change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator"
             type="file">
    }
    @if (fileIsUploaded) {

      <div class="file-selected">
        <div class="labeling">

          <div>

            <i class="ri ri-file-2-line"></i>
          </div>
          <div class="label">
            {{ filePath }}
          </div>
          <div class="weight">
            {{ fileWeight }}
          </div>
        </div>
        <button (click)="onRemoveFileSelected()" class="remove-file-upload">x</button>
      </div>
    }
    <!--      delete button from_text-->

    <button (click)="emptyText('fromText')" [ngClass]="{
      'is-visible' : appState.fromText.length
      }" class="delete-button button">x
    </button>
    @if (!fileIsUploaded) {
      <textarea
        (focus)="focusFromText()"
        (blur)="blurFromText()"
        (keyup)="onFromTextChanged()"
        (ngModelChange)="onFromTextChanged()"
        [ngModel]="appState.fromText"
        cols="30"
        id="from_text"
        name="from_text"
        placeholder="Copy/paste client’s question \n or Drag and drop extracted .csv file from CRM portal..."
        rows="5"></textarea>
    }
  </div>

  <div [ngClass]="{
  'is-focused' : toTextFocused
  }" id="toText">

    @if (loadingResume) {
      <div class="loading-container">
        <div class="loading">
          <div class="spinning">
            <i class="ri-restart-line"></i>
          </div>
        </div>
      </div>
    }
    @if (toText.length > 0) {
      <button (click)="emptyText('toText')" class="delete-button button">x</button>
    }
    @if (!loadingResume) {
      <textarea
        [ngModel]="appState.toText"
        (ngModelChange)="onToTextChanged()"
        (keyup)="onToTextChanged()"
        (focus)="focusToText()"
        (blur)="blurToText()"
        cols="30" id="to_text" name="to_text" rows="10"></textarea>
    }
  </div>
</div>