<template>
  <v>
    <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 xs12 sm12>
                  <v-layout row wrap>
                    <v-flex>
                      <img class="border-img" height="120" weight="120" src="https://static.workventure.com/uploads/images/company/%E0%B8%AB%E0%B8%B2%E0%B8%87%E0%B8%B2%E0%B8%99-%E0%B8%AA%E0%B8%A1%E0%B8%B1%E0%B8%84%E0%B8%A3%E0%B8%87%E0%B8%B2%E0%B8%99-%E0%B8%97%E0%B8%B1%E0%B8%A7%E0%B8%A3%E0%B9%8C%E0%B8%84%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%84%E0%B8%AD%E0%B8%A1-%E0%B8%88%E0%B8%B3%E0%B8%81%E0%B8%B1%E0%B8%94-650.png" alt="" >
                    </v-flex>
                    <v-flex>
                      <label class="subheading font-weight-medium indigo--text">Graphic & Web Designer</label>
                    </v-flex>
                  </v-layout>
                </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>

