<template>
  <div>
    <v-layout row wrap fill-height justify-center>
      <v-flex xs12 sm10 offset-sm-1>
        <v-layout row wrap justify-center>
          <v-flex xs12 sm4 class="pr-2">
            <v-flex xs12 sm12 class="white div-card pa-4">
              <v-flex xs12 sm12 class="mb-3">
                <span class="title font-weight-bold ">เงื่อนไขการค้นหา</span>
                <v-divider></v-divider>
              </v-flex>
              <v-flex xs12 sm12 class="">
               <label class="subheading font-weight-medium pb-1">ค้นหาโดยใช้คำหลัก</label>
               <v-text-field
                single-line
                label="ค้นหาโดยใช้คำหลัก"
                class="fix-height"
                outline
               ></v-text-field>
              </v-flex>
              <v-flex xs12 sm12 class="">
               <label class="subheading font-weight-medium pb-1">ค้นหาตามประเภทงาน</label>
               <v-select
                single-line
                label="เลือกประเภทงาน"
                class="fix-height"
                outline
               ></v-select>
              </v-flex>
              <v-flex xs12 sm12 class="">
               <label class="subheading font-weight-medium pb-1">ค้นหาโดยชื่อบริษัท</label>
               <v-text-field
                single-line
                label="พิมพ์ชื่อบริษัท"
                class="fix-height"
                outline
               ></v-text-field>
              </v-flex>
              <v-flex xs12 sm12 class="mt-2">
                <span class="subheading font-weight-bold ">BTS</span>
              </v-flex>
              <v-checkbox
                v-model="checkbox"
                :label="`BTS สายสีลม`"
                class="height-chkbox"
              ></v-checkbox>
              <v-checkbox
                v-model="checkbox"
                :label="`BTS สายสุขุมวิท`"
                class="height-chkbox"
              ></v-checkbox>
              <v-flex xs12 sm12 class="mt-4">
                <span class="subheading font-weight-bold ">MRT</span>
              </v-flex>
              <v-checkbox
                v-model="checkbox"
                :label="`MRT สายน้ำเงิน`"
                class="height-chkbox"
              ></v-checkbox>
              <v-checkbox
                v-model="checkbox"
                :label="`MRT สายสีม่วง`"
                class="height-chkbox"
              ></v-checkbox>
              <v-flex xs12 sm12 class="mt-4">
                <span class="subheading font-weight-bold ">ARL</span>
              </v-flex>
              <v-checkbox
                v-model="checkbox"
                :label="`ARL`"
                class="height-chkbox"
              ></v-checkbox>
              
              
            </v-flex>
          </v-flex>
          <v-flex xs12 sm8 class="pl-2">
            <v-flex xs12 sm12 class="">
              <span class="caption grey--text">แสดงผล 1 - 20 ตำแหน่งงาน จากทั้งหมด 89 งาน</span>
            </v-flex>
            <v-flex xs12 sm12 class="white div-card">
              <v-layout row wrap class="pa-2">
                <v-flex xs2 sm2>
                  <img class="" width="90" height="90" src="https://www.jobbkk.com/upload/employer/04/914/02B914/images/1784522.png" alt="">
                </v-flex>
                <v-flex xs10 sm7 class="pa-2">
                  <v-flex xs12 sm12>
                    <label class="subheading font-weight-bold indigo--text ">Graphic & Web Designer</label>
                  </v-flex>
                  <v-flex xs12 sm12 class="mb-1">
                    <label class="subheading font-weight-medium black--text ">วินวิน อินเตอร์แอคทีฟ จำกัด</label>
                  </v-flex>
                  <v-flex xs12 sm12>
                    <label class="body-2 grey--text ">สาทร, กรุงเทพมหานคร </label>
                  </v-flex>                   
                </v-flex>
                <v-flex xs12 sm3>
                  <v-layout row wrap justify-end>
                    <v-btn color="deep-orange " dark small depressed class="body-2">สมัครงานนี้</v-btn>
                  </v-layout>                  
                </v-flex>                 
              </v-layout>
              <v-flex xs12 sm12 class="detail-bottom">
                <v-layout row wrap>
                  <v-flex xs6 sm6 class="px-3 py-1">
                    <span class="caption">23 เม.ย. 2562</span>
                  </v-flex>
                  <v-flex xs6 sm6 class="px-3 py-1 text-sm-right text-xs-right">
                    <a class="caption">ดูเพิ่มเติม <v-icon small color="indigo ">fas fa-angle-right</v-icon></a>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
      
  </div>
</template>

<style lang="scss" scoped>

  .height-chkbox{
    height: 16px;
  }
  .detail-bottom{
    color: #616161;
    background: #f9f9f9;
  }
  .detail-job {
    background: #b3d4fc;
    text-shadow: none;
  }
  .border-img {
    border:1px solid #dae1e1;
  }
  .div-card {
    border-radius: 3px;
    box-shadow: 0 2px 1px rgba(0,0,0,.17);
  }
  .fix-height {
    height: 65px;
  }
  .col {
    float: left;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }
</style>

