<template>
    <div style="margin-top: 50px;">
        <v-container grid-list-md pa-10>
            <v-layout row wrap>
                <v-flex md12>
                    <h1>Users</h1>
                    <br><br>
                    <p>Here you can Administrate your apps</p>

                    <v-simple-table>
                        <template v-slot:default>
                            <thead>
                            <tr>
                                <th class="text-left">Name</th>
                                <th class="text-left">Status</th>
                                <th class="text-left">Primary Mail</th>
                                <th class="text-left">Flags</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr @click="userDetails(item.id)" v-for="item in user" :key="item.name">
                                <td>{{ item.username }}</td>
                                <td>{{ item.status }}</td>
                                <td>{{ item.primaryMail }}</td>
                                <td>
                                    <v-icon v-if="item.developer">mdi-code-tags</v-icon>
                                    <v-icon v-if="item.admin">mdi-account-key</v-icon>
                                </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 {
                user: []
            }
        },
        components: {
        },
        methods: {
            'loadUser': function () {
                AdminService.getUserList().then((res) => {
                    this.user = res.data.data;
                })
            },
            'userDetails': function(id) {
                this.$router.push({"path": "/admin/user/"+id})
            }
        },
        mounted: function() {
            this.loadUser();
        }
    }
</script>

