<template>
<v-card flat>
  <v-card-title>
    <v-spacer></v-spacer>
    <v-flex sm4 xs12>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-flex>  
  </v-card-title>
  <v-data-table
    :headers="headers"
    :items="items"
    class="elevation-1"
    :search="search"
  >
    <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="15%" class="text-sm-center">{{ props.item.position }}</td>
      <td width="10%" class="text-sm-center">{{ props.item.salary }}</td>
      <td width="20%" class="text-sm-center">
        <v-btn depressed class="mx-1" fab outline small color="cyan">
          <v-icon>edit</v-icon>
        </v-btn> 
        <v-btn depressed class="mx-1" fab outline small color="red">
          <v-icon>delete</v-icon>
        </v-btn> 
      </td>
    </template>
  </v-data-table>
</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: [
        { 
          id: 1,
          topic: 'ฝึกงานด้าน PHP Web Programmer',
          typejob: 'คอมพิวเตอร์/IT/โปรแกรมเมอร์',
          position: 'Web Developer',
          salary: 5000,
        },
        { 
          id: 2,
          topic: 'ออกแบบ/กราฟิก',
          typejob: 'กราฟฟิกดีไซน์/ออกแบบ',
          position: 'Graphic Designer',
          salary: 3000,
        }
      ]
    }
  }
}
</script>
