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

<template>
  <div class="col-md-9 col-12 row q-col-gutter-sm">
    <q-input
      :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('customerBranch.tab.authorized')"
      :model-value="readonly ? authorizedName || '-' : authorizedName"
      @update:model-value="
        (v) => (typeof v === 'string' ? (authorizedName = v) : '')
      "
    />
    <q-input
      :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('customerBranch.tab.authorized')} (EN)`"
      :model-value="readonly ? authorizedNameEN || '-' : authorizedNameEN"
      @update:model-value="
        (v) => (typeof v === 'string' ? (authorizedNameEN = v) : '')
      "
    />
  </div>
</template>
