<template>
  <div class="row mb-3">
    <label class="col-sm-4 col-form-label visually-hidden">{{
      trans(EVALUATION_PUBLIC_COMMENT)
    }}</label>
    <div class="col-sm-12">
      <ckeditor
        :editor="ClassicEditor"
        :config="classicEditorConfig"
        :placeholder="trans(EVALUATION_COMMENT_PLACEHOLDER)"
        :value="comment"
        @input="$emit('update:comment', $event)"
        tag-name="textarea"
      ></ckeditor>
    </div>
  </div>
</template>

<script setup>
import { Ckeditor } from "@ckeditor/ckeditor5-vue";
import { ClassicEditor } from "ckeditor5";
import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
import {
  EVALUATION_PUBLIC_COMMENT,
  EVALUATION_COMMENT_PLACEHOLDER,
  trans,
} from "translator";

defineProps(["comment"]);
defineEmits(["update:comment"]);
</script>
