<template>
  <div>
    <b-table :data="usersList" striped hoverable>
      <template slot-scope="props">
        <b-table-column field="name" label="Name">
          {{props.row}}
        </b-table-column>

        <b-table-column>
          <b-button v-if="isAdmin" @click="kickUser(props.row)" icon-left="karate" type="is-dark"/>
        </b-table-column>
      </template>
    </b-table>
  </div>
</template>

<script>
import { send } from '@/store/signalPlugin'

export default {
  name: 'Admin',
  computed: {
    usersList () {
      return this.$store.state.room.roomStatus.users
    },
    isAdmin () {
      return this.$store.state.room.admin
    }
  },
  methods: {
    kickUser (target) {
      send({ name: target, type: 'roomUserKick' })
    }
  }
}
</script>
