<script setup lang="ts">
import DatePicker from '../shared/DatePicker.vue';

const permitNumber = defineModel<string>('permitNumber', { default: '' });
const jobDescription = defineModel<string>('jobDescription', { default: '' });
const workplace = defineModel<string>('workplace', { default: '' });
const dateOfHire = defineModel<Date>('dateOfHire');

defineProps<{
  prefixId?: string;
  outlined?: boolean;
  readonly?: boolean;
}>();
</script>

<template>
  <div class="row q-mb-sm" style="gap: 10px">
    <div class="col-12 text-subtitle1 text-weight-bold">
      <p>Document Properties</p>
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('form.noticeJobEmployment.permitNumber')"
        for="input-citizen-id"
        v-model="permitNumber"
      />

      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('form.noticeJobEmployment.jobDescription')"
        for="input-citizen-id"
        v-model="jobDescription"
      />
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('form.noticeJobEmployment.workplace')"
        for="input-citizen-id"
        v-model="workplace"
      />
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <DatePicker
        :label="$t('form.noticeJobEmployment.dateOfHire')"
        v-model="dateOfHire"
        class="col-4"
        :id="`${prefixId}-input-birth-date`"
        :readonly="readonly"
        clearable
      />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
