<div
  class="text-truncate pointer d-flex"
  title="{{ context.value }}"
  data-cy="c8y-manage-translation-cell-renderer--edit"
  (click)="!isCreateDisabled ? editCell() : ''"
  *ngIf="!isCellEditable"
>
  <span
    class="text-truncate"
    *ngIf="!isCellEditable && context.value !== ''"
  >
    {{ context.value }}
  </span>
  <span
    class="text-truncate"
    title="{{ 'Add translation' | translate }}"
    *ngIf="!isCellEditable && context.value === ''"
  >
    <em class="text-muted">{{ 'Add translation' | translate }}</em>
  </span>
  <i
    class="showOnHover text-primary m-l-4"
    c8yIcon="pencil"
    title="{{ 'Edit translation' | translate }}"
    *ngIf="!isCreateDisabled"
  ></i>
</div>

<div
  class="input-group input-group-sm"
  *ngIf="isCellEditable && !isCreateDisabled"
>
  <input
    class="form-control"
    placeholder="{{ 'Add translation' | translate }}"
    type="text"
    #cellInput
    data-cy="c8y-manage-translation-cell-renderer--input"
    [(ngModel)]="cellValue"
  />
  <div class="input-group-btn">
    <button
      class="btn btn-clean"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="cancel()"
      data-cy="c8y-manage-translation-cell-renderer--cancel"
    >
      <i
        class="text-danger"
        c8yIcon="times"
      ></i>
    </button>
    <button
      class="btn btn-clean"
      title="{{ 'Save' | translate }}"
      type="button"
      (click)="save()"
      data-cy="c8y-manage-translation-cell-renderer--save"
    >
      <i
        class="text-primary"
        c8yIcon="check"
      ></i>
    </button>
  </div>
</div>