<script lang="ts" setup>
defineProps<{
  readonly?: boolean;
  prefixId?: string;
}>();
const contactName = defineModel<string>('contactName');
const mail = defineModel<string>('email');
const telephone = defineModel<string>('telephone');
</script>

<template>
  <div class="col-md-9 col-12 row q-col-gutter-md">
    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-contact-name`"
      :id="`${prefixId}-input-contact-name`"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('customer.table.contactName')"
      v-model="contactName"
    />

    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-mail`"
      :id="`${prefixId}-input-mail`"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('formDialogInputEmail')"
      v-model="mail"
    />
    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-telephone`"
      :id="`${prefixId}-input-telephone`"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('formDialogInputTelephone')"
      v-model="telephone"
    />
  </div>
</template>
