ng-implementation/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html

<div class="translate-texts">


  <div id="fromText">

    @if (!fileIsUploaded && !textFocused) {
      <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 class="remove-file-upload" (click)="onRemoveFileSelected()">x</button>
      </div>
    }
    <!--      delete button from_text-->

    <button (click)="emptyText('fromText')" [ngClass]="{
      'is-visible' : fromText.length
      }" class="delete-button button">x
    </button>

    <textarea
      (focus)="focusFromText()"
      (keyup)="onFromTextChanged()"
      [(ngModel)]="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 id="toText">

    @if (loadingResume) {
      <div class="loading">
        loading...
      </div>
    }
    @if (toText.length > 0) {
      <button (click)="emptyText('toText')" class="delete-button button">x</button>
    }
    <textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
  </div>

</div>