<template>
  <div>
    <table class="table table-hover table-bordered">
      <caption>14 active requests</caption>
      <thead class="thead-light">
        <tr>
          <th>Name</th>
          <th>ID</th>
          <th>Requested On</th>
          <th>Role</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row of data" :key="row.id">
          <td>{{row.name}}</td>
          <td>{{row.id}}</td>
          <td>{{row.requestedOn}}</td>
          <td>
            <select>
              <option value="student">Student</option>
              <option value="processor">Processor</option>
              <option value="officer">Officer</option>
            </select>
          </td>
          <td>
            <button class="btn btn-success">Grant</button>
            <button class="btn btn-danger">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  export default {
    name: 'RequestAccessList',
    props: {
      'data': {
        type: Array,
        default: []
      }
    }
  }
</script>
