<c8y-title>{{ 'Localization' | translate }}</c8y-title>

@if (isLoading()) {
  <c8y-loading></c8y-loading>
} @else {
  <c8y-action-bar-item placement="right">
    <button
      class="btn btn-link"
      [disabled]="!isValidJSON()"
      (click)="saveTranslations()"
      data-cy="c8y-translation-editor--save-and-apply"
    >
      <i c8yIcon="save"></i>
      <span translate>Save and apply</span>
    </button>
  </c8y-action-bar-item>

  <c8y-action-bar-item placement="right">
    <button
      class="btn btn-link"
      [disabled]="!isValidJSON()"
      (click)="importTranslationKeys()"
      data-cy="c8y-translation-editor--import-translation-keys"
    >
      <i [c8yIcon]="'import'"></i>
      <span translate>Import translation keys from apps</span>
    </button>
  </c8y-action-bar-item>

  <div class="card card--fullpage content-fullpage">
    <c8y-editor
      class="flex-grow"
      [editorOptions]="editorOptions"
      [ngModel]="valueString()"
      (ngModelChange)="onValueChange($event)"
      (editorInit)="onEditorInit($event)"
      monacoEditorMarkerValidator
    ></c8y-editor>
  </div>
}