<template>
    <div class="transparent">
        <v-layout row wrap justify-center >
            <v-flex  xs12 sm5 class="ma-2 border">
                <v-flex class="bg-title pa-2">
                    <v-layout row wrap align-center>
                        <div class="mx-3">
                            <v-icon x-large dark>fas fa-briefcase</v-icon>
                        </div>
                        <div class="pa-0">
                            <v-flex xs12 sm12>
                                <span class="font-title font-weight-bold">ข้อมูลรายละเอียดของงาน</span>
                            </v-flex>                       
                            <v-flex xs12 sm12>
                                <span class="font-subtitle ">(Job description information)</span>
                            </v-flex>                       
                        </div>
                    </v-layout>
                </v-flex>
                <v-flex class="bg-body pa-4">
                    <v-flex xs12 sm12>
                        <v-text-field
                            label="หัวข้องาน"
                            placeholder=" "
                        ></v-text-field>
                        <v-select
                            label="ประเภทงาน"
                            placeholder=" "
                            item-value="text"
                        ></v-select>
                        <v-text-field
                            label="ตำแหน่งงาน "
                            placeholder=" "
                        ></v-text-field>
                        <v-text-field
                            label="ค่าตอบแทน/เงินเดือน  "
                            placeholder=" "
                        ></v-text-field>
                        <v-text-field
                            label="วันทำงาน  "
                            placeholder=" "
                        ></v-text-field>
                        <v-text-field
                            label="เวลาทำงาน  "
                            placeholder=" "
                        ></v-text-field>
                        <v-text-field
                            label="จำนวนที่รับ  "
                            placeholder=" "
                            type="number"
                        ></v-text-field>
                    </v-flex>
                </v-flex>
            </v-flex>
            <v-flex  xs12 sm5 class="ma-2">
                <v-flex class="bg-title-1 pa-2">
                    <v-layout row wrap align-center>
                        <div class="mx-3">
                            <v-icon x-large dark>fas fa-user-circle</v-icon>
                        </div>
                        <div class="pa-0">
                            <v-flex xs12 sm12>
                                <span class="font-title font-weight-bold">คุณสมบัติของผู้สมัครงาน</span>
                            </v-flex>                       
                            <v-flex xs12 sm12>
                                <span class="font-subtitle ">(Job applicant qualifications)</span>
                            </v-flex>                       
                        </div>
                    </v-layout>
                </v-flex>
                <v-flex class="bg-body pa-4">
                    <v-flex xs12 sm12>
                        <v-combobox
                            v-model="gender"
                            :items="items"
                            label="เพศ"
                            placeholder=" "
                            multiple
                            >
                            <template v-slot:selection="data">
                                <v-chip
                                :key="JSON.stringify(data.item)"
                                :selected="data.selected"
                                :disabled="data.disabled"
                                class="v-chip--select-multi"
                                @input="data.parent.selectItem(data.item)"
                                >
                                <v-avatar
                                    class="accent white--text"
                                    v-text="data.item.slice(0, 1).toUpperCase()"
                                ></v-avatar>
                                {{ data.item }}
                                </v-chip>
                            </template>
                        </v-combobox>
                        <v-select
                            label="ระดับการศึกษา"
                            placeholder=" "
                            item-value="text"
                        ></v-select>
                        <v-text-field
                            label="เกรดเฉลี่ย  "
                            placeholder=" "
                        ></v-text-field>
                        <v-text-field
                            label="ระยะเวลาในการทำงาน  "
                            placeholder=" "
                        ></v-text-field>
                        <v-text-field
                            label="สาขาวิชาที่เปิดรับ "
                            placeholder=" "
                        ></v-text-field>
                        <v-textarea
                            label="คุณสมบัติเพิ่มเติม"
                            placeholder=" "
                        ></v-textarea>
                    </v-flex>
                </v-flex>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        gender: [],
        items: [
          'ชาย',
          'หญิง'
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
    .border {
        border:1px solid #dcdcdc;
        border-radius: 5px;
    }
    .bg-title{
        background-color: #00AAFF;
        border-radius: 8px 8px 0 0;
        display: block;
    }
    .bg-body{
        background-color: #fff;
        border-radius:0 0 8px 8px;
    }
    .bg-title-1{
        background-color: #89969f;
        border-radius: 8px 8px 0 0;
    }
    .font-title {
        font-size: 20px;
        color: #fff;
        display: block;
        font-family: "Prompt", sans-serif;
    }
    .font-subtitle {
        font-size: 16px;
        color: #2d3f4b;
        display: block;
        font-family: "Prompt", sans-serif;
    }
</style>

