<template>
    <div>
        <v-layout row wrap>
            <v-flex xs12 sm12 class="font-weight-light headline text-xs-left text-sm-center">
                เพิ่มรายละเอียดงาน
            </v-flex>                            
        </v-layout>
        <v-layout row wrap fill-height justify-center class="pa-3 ">
            <v-flex xs12 sm8 offset-sm-2 class="border pa-3">
                <v-flex xs12 class=" title font-weight-bold deep-orange--text">
                    <v-icon color="deep-orange">far fa-newspaper</v-icon> ข้อมูลงาน
                    <v-divider class="mt-1"></v-divider>
                </v-flex>
                <v-layout row wrap>
                     <v-flex xs12 sm6 class="pa-3">
                        <label class="subheading font-weight-bold"> หัวข้องาน <span class="red--text">*</span></label>
                        <VTextField
                            outline
                            v-model="job_title"
                            label="หัวข้องาน"
                        ></VTextField>
                        <label class="subheading font-weight-bold"> ประเภทงาน <span class="red--text">*</span></label>
                        <VSelect
                            outline
                            v-model="job_type"
                            label="ประเภทงาน"
                        ></VSelect>
                        <label class="subheading font-weight-bold"> ตำแหน่งงาน <span class="red--text">*</span></label>
                        <VTextField
                            outline
                            v-model="department_job"
                            label="ตำแหน่งงาน"
                        ></VTextField>
                    </v-flex>
                    <v-flex xs12 sm6 class="pa-3">
                        <label class="subheading font-weight-bold"> ค่าตอบแทน/เงินเดือน <span class="red--text">*</span></label>
                        <VTextField
                            outline
                            v-model="salary"
                            label="ค่าตอบแทน/เงินเดือน"
                        ></VTextField>
                        <label class="subheading font-weight-bold"> จำนวนที่รับ <span class="red--text">*</span></label>
                        <VTextField
                            outline
                            v-model="amount"
                            label="จำนวนที่รับ"
                            type="number"
                            min="0"
                        ></VTextField>
                    </v-flex>
                </v-layout>             
            </v-flex>           
            <v-flex xs12 sm8 offset-sm-2 class="border pa-3 mt-2">
                <v-flex xs12 class=" title font-weight-bold deep-orange--text">
                    <v-icon color="deep-orange">far fa-newspaper</v-icon> ข้อมูลงาน
                    <v-divider class="mt-1"></v-divider>
                </v-flex>
                <v-layout row wrap>
                     <v-flex xs12 sm6 class="pa-3">
                        <label class="subheading font-weight-bold"> หัวข้องาน <span class="red--text">*</span></label>
                        <VTextField
                            outline
                            v-model="job_title"
                            label="หัวข้องาน"
                        ></VTextField>
                        <label class="subheading font-weight-bold"> ประเภทงาน <span class="red--text">*</span></label>
                        <VSelect
                            outline
                            v-model="job_type"
                            label="ประเภทงาน"
                        ></VSelect>
                        <label class="subheading font-weight-bold"> ตำแหน่งงาน <span class="red--text">*</span></label>
                        <VTextField
                            outline
                            v-model="department_job"
                            label="ตำแหน่งงาน"
                        ></VTextField>
                    </v-flex>
                    <v-flex xs12 sm6 class="pa-3">
                        <label class="subheading font-weight-bold"> ค่าตอบแทน/เงินเดือน <span class="red--text">*</span></label>
                        <VTextField
                            outline
                            v-model="salary"
                            label="ค่าตอบแทน/เงินเดือน"
                        ></VTextField>
                        <label class="subheading font-weight-bold"> จำนวนที่รับ <span class="red--text">*</span></label>
                        <VTextField
                            outline
                            v-model="amount"
                            label="จำนวนที่รับ"
                            type="number"
                            min="0"
                        ></VTextField>
                    </v-flex>
                </v-layout>             
            </v-flex>           
        </v-layout>
    </div>
</template>

<style lang="scss" scoped>
    .border {
        border:1px solid #dcdcdc;
        border-radius: 5px;
    }
</style>

