<script setup lang="ts">
import { EmployeeOtherCreate } from 'stores/employee/types';

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  employee?: boolean;
}>();
const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
</script>
<template>
  <div class="col-12" v-if="employeeOther">
    <div class="col-12 app-text-muted row items-center q-mb-md">
      • {{ $t('formDialogTitleFamilyHistory') }}
    </div>

    <div class="col-12 row q-col-gutter-y-md">
      <div class="col-3 q-pl-xl"></div>
      <div class="col-9 row q-col-gutter-md">
        <q-input
          for="input-citizenId"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          :label="$t('formDialogInputCitizenId')"
          class="col"
          v-model="employeeOther.citizenId"
          lazy-rules
        />
      </div>
      <div class="col-3 q-pl-xl app-text-muted">
        {{ $t('formDialogTitleFamilyHistoryDad') }}
      </div>
      <div class="col-9 row q-col-gutter-md">
        <q-input
          for="input-father-first-name"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputFirstName')"
          v-model="employeeOther.fatherFirstName"
        />
        <q-input
          for="input-father-last-name"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputLastName')"
          v-model="employeeOther.fatherLastName"
        />
        <q-input
          for="input-father-first-name-en"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputFirstNameEN')"
          v-model="employeeOther.fatherFirstNameEN"
        />
        <q-input
          for="input-father-last-name-en"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputLastNameEN')"
          v-model="employeeOther.fatherLastNameEN"
        />
        <q-input
          for="input-father-birthplace"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-6"
          :label="$t('formDialogInputFamilyBirthPlace')"
          v-model="employeeOther.fatherBirthPlace"
        />
      </div>
      <div class="col-12" />
      <div class="col-3 q-pl-xl app-text-muted">
        {{ $t('formDialogTitleFamilyHistoryMom') }}
      </div>
      <div class="col-9 row q-col-gutter-md">
        <q-input
          for="input-mother-first-name"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputFirstName')"
          v-model="employeeOther.motherFirstName"
        />
        <q-input
          for="input-mother-last-name"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputLastName')"
          v-model="employeeOther.motherLastName"
        />
        <q-input
          for="input-mother-first-name-en"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputFirstNameEN')"
          v-model="employeeOther.motherFirstNameEN"
        />
        <q-input
          for="input-mother-last-name-en"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('formDialogInputLastNameEN')"
          v-model="employeeOther.motherLastNameEN"
        />
        <q-input
          for="input-mother-birthplace"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          hide-bottom-space
          class="col-6"
          :label="$t('formDialogInputFamilyBirthPlace')"
          v-model="employeeOther.motherBirthPlace"
        />
      </div>
    </div>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>
