<script setup lang="ts">
const telephoneNo = defineModel<string>('telephoneNo');
const contact = defineModel<string>('contact');
const email = defineModel<string>('email');
const contactName = defineModel<string>('contactName');
// const operatingHours = defineModel<string>('operatingHours');
const lineId = defineModel<string>('lineId');
const typeBranch = defineModel<string>('typeBranch');

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
}>();
</script>
<template>
  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
  <div class="col-9 row q-col-gutter-md">
    <q-input
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-5"
      :label="
        typeBranch === 'headOffice'
          ? $t('formDialogInputEmailHq')
          : $t('formDialogInputEmailSubBranch')
      "
      v-model="email"
      for="input-email"
    />

    <q-input
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-7"
      :label="
        typeBranch === 'headOffice'
          ? $t('formDialogInputTelephoneHq')
          : $t('formDialogInputTelephoneSubBranch')
      "
      v-model="telephoneNo"
      for="input-telephone-no"
    />

    <q-input
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-5"
      :label="$t('formDialogInputContactName')"
      v-model="contactName"
      for="input-contact-name"
    />

    <q-input
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-7"
      :label="$t('formDialogInputTelephoneContact')"
      v-model="contact"
      for="input-contact"
    />

    <q-input
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-5"
      label="Line ID"
      v-model="lineId"
      for="input-line-id"
    />
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>
