<template>
  <div>
    <v-layout row wrap  class="bodyborder pa-3 mb-2">
      <v-flex xs12 sm6>
        <v-flex xs12 sm12 class="subheading">
          ยินดีต้อนรับ
        </v-flex>
        <v-flex xs12 sm12 class="font-weight-bold black--text subheading">
          ake8225
        </v-flex>
      </v-flex>
      <v-flex xs12 sm6>
        <v-flex xs12 sm12  class="grey--text body-1 text-xs-left text-sm-right">
          Lasted Login
        </v-flex>
        <v-flex xs12 sm12  class="body-1 text-xs-left text-sm-right">
          {{date}}
          <v-divider inset vertical></v-divider>
          {{time}}
        </v-flex>
      </v-flex>     
    </v-layout>
    <v-layout row wrap  class="bodyborder pa-3 mb-2">
      <v-flex xs12 sm12 >
        <v-flex xs12 sm8>
          <span class=" subheading font-weight-bold teal--text"><v-icon color="teal">person_pin</v-icon> การตั้งค่าการจัดการงาน</span>
        </v-flex>
        <v-flex xs12 sm4 class="text-sm-right">
          <v-btn  small depressed color="orange darken-2" dark>
            <v-icon dark small>fas fa-plus</v-icon>&nbsp;ประกาศงาน
          </v-btn>
        </v-flex>       
        
        <v-divider ></v-divider>
      </v-flex>
      <v-layout row wrap align-center fill-height class="pa-3">
        <v-flex xs4 sm1 class="text-sm-center text-xs-center">
          <v-icon size="60px">far fa-newspaper</v-icon>
        </v-flex>        
        <v-flex xs6 sm2>
          <v-flex xs12 sm12 class="subheading font-weight-light">
            งานทั้งหมด
          </v-flex>
          <v-flex xs12 sm12 class="subheading font-weight-black" >
            0 งาน
          </v-flex>
        </v-flex>
        <v-flex xs4 sm1 class="text-sm-center text-xs-center">
          <v-icon size="60px">far fa-credit-card</v-icon>
        </v-flex>        
        <v-flex xs6 sm2>
          <v-flex xs12 sm12 class="subheading font-weight-light">
            งานที่เปิดรับสมัคร
          </v-flex>
          <v-flex xs12 sm12 class="subheading font-weight-black" >
            0 งาน
          </v-flex>
        </v-flex>
        <v-flex xs4 sm1 class="text-sm-center text-xs-center">
          <v-icon size="60px">far fa-address-card</v-icon>
        </v-flex>        
        <v-flex xs6 sm2>
          <v-flex xs12 sm12 class="subheading font-weight-light">
            ผู้ที่สมัครงาน
          </v-flex>
          <v-flex xs12 sm12 class="subheading font-weight-black" >
            0 คน
          </v-flex>
        </v-flex>
        <v-flex xs12 sm3 class="text-sm-center text-xs-center">
          <v-flex xs12 sm12>
            
          </v-flex>
          <v-flex xs12 sm12>
            <v-btn  small depressed color="green" dark>
              <v-icon dark small>fas fa-plus</v-icon>&nbsp;จัดการงาน
            </v-btn>
          </v-flex>
          <v-flex xs12 sm12>
            <v-btn  small depressed color="primary" dark>
          <v-icon dark small>fas fa-plus</v-icon>&nbsp;จัดการผู้สมัครงาน
        </v-btn>
          </v-flex>  
        </v-flex> 
      </v-layout>   
    </v-layout>
    <v-layout row wrap class="bodyborder pa-3">
      <v-flex xs12 sm12 >
        <span class=" subheading font-weight-bold teal--text"><v-icon color="teal">business</v-icon> ข้อมูลบริษัท</span>
        <v-divider ></v-divider>
      </v-flex>     
      <v-layout row wrap class="pa-3">
        <v-flex sm2 xs12 class="text-sm-center text-xs-center">
            <img src="https://www.jobbkk.com/upload/employer/0A/86A/00786A/images/308262.png" alt="" height="160">
        </v-flex>
        <v-flex xs12 sm10 class="px-3">
          <v-flex xs12 sm12>
            <label class="font-weight-bold subheading green--text">บริษัท พีพี ออนไทม์ จำกัด</label>
          </v-flex>
          <v-flex xs12 sm12>
            <label class="body-2">1011 อาคารศุภาลัย แกรนด์ ทาวเวอร์ ชั้น 16 ถนนพระราม 3 แขวงช่องนนทรี เขตยานนาวา จังหวัดกรุงเทพมหานคร 10120</label>
          </v-flex>
          <v-flex xs12 sm12 class="mt-1">
            <label class="caption"><v-icon small>email</v-icon> kittipong.ma.59@ubu.ac.th</label>
          </v-flex>
          <v-flex xs12 sm12>
            <label class="caption"><v-icon small>desktop_mac</v-icon> http://www.pp-ontime.co.th/</label>
          </v-flex>
          <v-flex xs12 sm12>
            <label class="caption"><v-icon small>phone</v-icon> โทร. 02-056-2099</label>
          </v-flex>
          <v-flex xs12 sm12>
            <label class="caption"><v-icon small>print</v-icon> แฟกซ์. : 02-056-2088</label>
          </v-flex>
          <v-flex xs12 sm12>
            <v-btn small depressed dark color="red">
              <v-icon dark >settings</v-icon> แก้ไขข้อมูล
            </v-btn>
          </v-flex>
        </v-flex>
      </v-layout> 
        
    </v-layout>
  </div>
</template>

<script>
export default {
  computed: {
    date () {
      return this.$store.getters.getTime.date
    },
    time () {
      return this.$store.getters.getTime.time
    }
  }
}
</script>


<style lang="scss" scoped>

  .bodyborder{
    border: 1px solid #dcdcdc;
    border-radius: 3px;
  }
</style>
