<script setup lang="ts">
const remark = defineModel<string>('remark');
const detail = defineModel<string>('detail');
const name = defineModel<string>('name');
const code = defineModel<string>('code');

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

<template>
  <div class="row">
    <div class="col-4 app-text-muted">
      • {{ $t(`formDialogTitleInformation`) }}
    </div>
    <div class="col-8 row q-col-gutter-md">
      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-6"
        :label="
          $t(
            isType ? 'ProductAndServiceTypeCode' : 'ProductAndServiceGroupCode',
          )
        "
        v-model="code"
      />
      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-6"
        :label="
          $t(
            isType ? 'ProductAndServiceTypeName' : 'ProductAndServiceGroupName',
          )
        "
        v-model="name"
      />
      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('detail')"
        v-model="detail"
      />
      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('formDialogInputRemark')"
        v-model="remark"
      />
    </div>
  </div>
</template>

<style scoped></style>
