<template>
<v-card flat>
  <h1 class="orange--text">จัดการข้อมูลงาน</h1>
  <v-card-title>
    <v-spacer></v-spacer>
    <v-flex sm4 xs12>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="ค้นหา"
        single-line
        hide-details
      ></v-text-field>
    </v-flex>  
  </v-card-title>
  <v-data-table
    :headers="headers"
    :items="items"
    class="elevation-1"
    :search="search"
    rows-per-page-text="จำนวนเเถวต่อหน้า"
    no-results-text="ไม่พบข้อมูล"
    no-data-text="ไม่มีข้อมูล"
  >
    <template v-slot:items="props">
      <td width="10%" class="text-sm-center">{{ props.item.id }}</td>
      <td width="30%" class="text-sm-left">{{ props.item.topic }}</td>
      <td width="15%" class="text-sm-center">{{ props.item.typejob }}</td>
      <td width="20%" class="text-sm-center">{{ props.item.position }}</td>
      <td width="5%" class="text-sm-center">{{ props.item.salary }}</td>
      <td width="20%" class="text-sm-center">
        <v-layout row wrap justify-center>
          <v-btn depressed class="mx-1" fab outline small color="cyan" @click="$router.push(`/employer/editjob/${props.item.job_id}`)">
          <v-icon>edit</v-icon>
        </v-btn> 
        <v-btn depressed class="mx-1" fab outline small color="red" @click="deleteJob(props.item.job_id)">
          <v-icon>delete</v-icon>
        </v-btn> 
        </v-layout>
        
      </td>
    </template>
  </v-data-table>
  <v-layout row wrap justify-center>
    <v-btn color="error" class="text-sm-center text-xs-center" dark @click="$router.push('/employer')">ย้อนกลับ</v-btn>
  </v-layout>
</v-card>
</template>

<script>
export default {
  data () {
    return {
      search: '',
      headers: [
        { text: 'ชื่อผุ้สมัคร', value: 'id', align: 'center' },
        { text: 'หัวข้องาน', value: 'topic', align: 'center' },
        { text: 'อีเมล', value: 'typejob', align: 'center' },
        { text: 'ตำแหน่งงาน', value: 'position', align: 'center' },
        { text: 'ค่าตอบแทน/เงินเดือน', value: 'salary', align: 'center' },
        { text: 'Action', value: 'action', align: 'center' }
      ],
      items: []
    }
  }
}
</script>