<script setup lang="ts">
import { ref } from 'vue';
const thaiName = ref<string>('');
const EngName = ref<string>('');

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
}>();
</script>

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>
  <div class="col-9 row q-col-gutter-md">
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('corporationThaiName')"
      v-model="thaiName"
    />
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('corporationEnglishName')"
      v-model="EngName"
    />
  </div>

  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style scoped></style>
