<template>
    <Page>
        <NotFound v-if="!$isGranted('users') && !$isGranted('community')" />
        <div v-else>
            <p>
                <nuxt-link to="/admin">
                    <Icon v="user-cog" />
                    <T>admin.header</T>
                </nuxt-link>
            </p>
            <h2>
                <Icon v="user-cog" />
                Profiles
            </h2>

            <section>
                <ChartSet :name="`profiles (${$config.locale})`" :data="chart" init="cumulative" />
            </section>
        </div>
    </Page>
</template>

<script lang="ts">
import Vue from 'vue';
import { head } from '../src/helpers.ts';

export default Vue.extend({
    async asyncData({ app }) {
        return {
            chart: await app.$axios.$get(`/admin/stats/users-chart/${app.$config.locale}`),
        };
    },
    head() {
        return head({
            title: `${this.$t('admin.header')} • Profiles`,
        }, this.$translator);
    },
});
</script>
