<template lang="pug">
  #userlist
    h3 Registered Users ({{ pagination.total }})
    pagination(v-bind="pagination" v-on:page="getUsers")
    .list.users
      user(v-for='user in users' v-bind="user")
    ban-modal(:show='banning' @close='banning = 0' :id='banning')
</template>

<script>
  import Pagination from './Pagination.vue'
  import User from './User.vue'
  import BanModal from './BanModal.vue'

  export default {
    data: function () {
      return {
        pagination: {
          offset: 0,
          page: 1,
          pages: 1,
          perPage: 6,
          total: 0
        },
        users: [],
        banning: 0
      }
    },
    components: {
      Pagination, User, BanModal
    },
    methods: {
      getUsers: function (page) {
        this.$http.get('/admin/api/users?page=' + page).then(data => {
          if (data.body && data.body.error) return
          this.pagination = data.body.page
          this.users = data.body.users
        })
      }
    },
    mounted: function () {
      this.getUsers(1)

      this.$on('ban', function (id) {
        this.banning = id
      })
    }
  }
</script>
