<template>
    <div class="transparent">
        <v-layout row wrap justify-center >
            <v-flex  xs12 sm5 class="ma-2">
                <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-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-2">
                    
                </v-flex>
            </v-flex>
        </v-layout>
    </div>
</template>

<style lang="scss" scoped>
    .border {
        border:1px solid #dcdcdc;
        border-radius: 5px;
    }
    .bg-title{
        background-color: #00AAFF;
        border-radius: 8px 8px 0 0;
    }
    .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>

