<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-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 sm12 xs12 class="success">
                  <v-layout row wrap>
                    <v-flex xs12 sm10>
                      <div class="col">
                        <img class="" width="90" height="90" src="https://www.jobbkk.com/upload/employer/04/914/02B914/images/1784522.png" alt="">
                      </div>
                      <div class="col pa-2">
                        <v-flex xs12 sm12>
                          <label class="title 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>                   
                      </div>
                    </v-flex>
                  </v-layout>
                  
                  <div class="col pa-2 primary">
                    <v-layout row wrap justify-end>
                      <v-flex xs12 sm12 class="">
                        <v-btn color="deep-orange " dark small depressed class="body-2">สมัครงานนี้</v-btn>
                      </v-flex> 
                    </v-layout>                                     
                  </div>
                </v-flex>
              </v-layout>
                
            </v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
      
  </div>
</template>

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

