<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-3">
              <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-layout row wrap>
                 <v-flex xs6 sm6 class="pr-1">
                   <v-select
                      single-line
                      label="ตั้งแต่"
                      class="fix-height"
                      outline
                    ></v-select>
                 </v-flex>
                 <v-flex xs6 sm6 class="pl-1">
                   <v-select
                      single-line
                      label="ถึง"
                      class="fix-height"
                      outline
                    ></v-select>
                 </v-flex>
               </v-layout>
              </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>
          </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 pa-3">
              <v-layout row wrap>
                <v-flex d-flex xs12 sm12 class="primary">
                  sdfdsfdsf
                </v-flex>
              </v-layout>
            </v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
      
  </div>
</template>

<style lang="scss" scoped>
  .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;
  }
</style>

