<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="['text', 'email', 'password', 'url', 'number'].includes(jobInfoType)" :type="jobInfoType" :id="'' + jobInfo.id" :name="'' + jobInfo.id" :placeholder="jobInfo.placeholder" v-model="jobInfo.value as string" :required="jobInfo.is_required" />
        <Input v-else-if="jobInfoType == 'decimal'" :type="jobInfoType" :id="'' + jobInfo.id" :name="'' + jobInfo.id" :placeholder="jobInfo.placeholder" v-model="jobInfo.value as number" step="any" :required="jobInfo.is_required" />
        <VModelCheckbox v-else-if="jobInfoType == 'boolean'" :id="'' + jobInfo.id" v-model="jobInfo.value as boolean" />
    </div>


</template>
