<script setup lang="ts">
const remark = defineModel<string>('remark', { default: '' });

defineProps<{
  readonly: boolean;
}>();
</script>

<template>
  <div class="col-12 row">
    <div class="col-12 q-mb-md text-weight-bold text-body1">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-asterisk-circle-outline"
        style="background-color: var(--surface-3)"
      />
      {{ $t('general.remark') }}
    </div>

    <div class="col-12">
      <q-field
        class="full-width"
        outlined
        for="input-detail"
        id="input-detail"
        :readonly="readonly"
        :borderless="readonly"
        :label="$t('general.remark')"
        stack-label
        dense
      >
        <q-editor
          dense
          :model-value="readonly ? remark || '-' : remark"
          @update:model-value="
            (v) => (typeof v === 'string' ? (remark = v) : '')
          "
          min-height="5rem"
          class="q-mt-sm q-mb-xs"
          :flat="!readonly"
          :readonly="readonly"
          :toolbar-color="
            readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
          "
          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
          style="
            cursor: auto;
            color: var(--foreground);
            border-color: var(--surface-3);
          "
          :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
        />
      </q-field>
    </div>
  </div>
</template>
