<template>
    <div class="job">
        <h3 class="header">{{type}}</h3>
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>Enqueued</th>
                    <th>Kind</th>
                    <th>User</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="job in jobs" :key="job.id">
                    <td>{{job.enqueued}}</td>
                    <td>{{job.kind}}</td>
                    <td>{{job.user}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
  name: "job",
  props: ["type", "jobs"]
};
</script>

<style lang="scss" scoped>
.job {
  position: relative;
  text-align: left;
}
</style>