<!-- components/Admin.vue -->
<template>
    <div>
        <section class="hero is-primary">
            <div class="hero-body">
                <div class="container has-text-centered">
                    <h2 class="title">Admin Tools</h2>
                    <p class="subtitle error-msg">{{ errorMsg }}</p>
                    <router-link :to="{ name: 'admin.group'}">{{ $t('group') }}</router-link>
                    <br>
                    <router-link :to="{ name: 'admin.user'}">{{ $t('user') }}</router-link>
                    <br>
                    <router-link :to="{ name: 'admin.permission'}">{{ $t('permission') }}</router-link>
                </div>
            </div>
        </section>

        <hr/>
        <section>
            <router-view></router-view>
        </section>

    </div>
</template>

<script>
    import {EventBus} from '@/utils';

    export default {
        data() {
            return {
                email: '',
                errorMsg: '',
            };
        },
        methods: {
            authenticate() {
                this.$store.dispatch('login', {email: this.email, password: this.password})
                    .then(() => this.$router.push('/'));
            },
        },
        mounted() {
        },
        beforeDestroy() {
            // todo ...
        },
        computed: {
            // todo ...
        },
    };
</script>

<style lang="scss">
    .error-msg {
        color: red;
        font-weight: bold;
    }
</style>
