<template>
    <div style="margin-top: 50px;">
        <v-container grid-list-md pa-10>
            <v-layout row wrap>
                <v-flex md12>
                    <h1>Invites</h1>
                    <br><br>
                    <v-simple-table>
                        <template v-slot:default>
                            <thead>
                            <tr>
                                <th class="text-left">#</th>
                                <th class="text-left">Username</th>
                                <th class="text-left">Status</th>
                                <th class="text-left">Invide Token</th>
                                <th class="text-left">Comment</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in invites" :key="item.name">
                                <td>{{ item.id }}</td>
                                <td>{{ item.username }}</td>
                                <td>{{ item.status }}</td>
                                <td>{{ item.code }}</td>
                                <td>{{ item.comment }}</td>
                            </tr>
                            </tbody>
                        </template>
                    </v-simple-table>


                </v-flex>
            </v-layout>
        </v-container>


    </div>

</template>

<script>

    import AdminService from '../../services/Admin'

    export default {
        data () {
            return {
                invites: []
            }
        },
        methods: {
            'loadApp': function () {
                AdminService.listInvites().then((res) => {
                    this.invites = res.data.data;
                })
            }
        },
        mounted: function() {
            this.loadApp();
        }
    }
</script>

