<script setup lang="ts">
import Checkbox from '@/Components/ui/checkbox/Checkbox.vue';
import VModelCheckbox from '@/Components/ui/checkbox/VModelCheckbox.vue';
import Input from '@/Components/ui/input/Input.vue';
import { Label } from '@/Components/ui/label';
import Description from '@/Components/ui/text/Description.vue';
import { JobInfo } from '@/types/Jobs/job';
import { watch } from 'vue';

const props = defineProps<{
    jobInfo: JobInfo;
}>();

const jobInfoType = props.jobInfo.job_info_type.name;
</script>

<template>
    <div>
        <Label :for="'' + jobInfo.id" class="text">{{ jobInfo.name }}<span v-if="jobInfo.is_required" class="cursor-help" title="Requis" aria-label="Requis">*</span></Label>
        <Description>{{ jobInfo.description }}</Description>
        <Input v-if="jobInfoType != 'checkbox'" :type="jobInfoType" :id="'' + jobInfo.id" :name="'' + jobInfo.id" :placeholder="jobInfo.placeholder" v-model="jobInfo.value as string" :required="jobInfo.is_required" />
        <VModelCheckbox v-else :id="'' + jobInfo.id" :class="''" v-model="jobInfo.value as boolean" />
    </div>


</template>
