<template>
<div>
	<div class="jumbotron">
	    <h1>@{{ title }}</h1>
	</div>
	<table class="table table-striped">
	    <thead>
	        <tr>
	            <th>Name</th>
	            <th>Email</th>
	            <th>Age</th>
	            <th>Department</th>
	            <th>Actions</th>
	        </tr>
	    </thead>
	    <tbody>
	        <tr v-for="user in users"  :key="user.id" :class="{active: currentUser === user}">
	            <td>@{{ user.name }}</td>
	            <td>@{{ user.email }}</td>
	            <td>@{{ user.age }}</td>
	            <td>@{{ user.department }}</td>
	            <td>
	                <a class="btn btn-xs btn-primary" v-on:click.prevent="editUser(user)">Edit</a>
	                <a class="btn btn-xs btn-danger" v-on:click.prevent="deleteUser(user)">Delete</button>
	            </td>
	        </tr>
	    </tbody>
	</table>
</div>

</template>

<script>
	module.exports = {
		props: ['users'],
		data: function() {
			return {

			}
		}
	}
</script>