<template>
  <div>
    <q-page
      padding
      class="fit row justify-center content-center items-center"
      v-if="true"
    >
      <q-card
        class="col-4"
        height=""
      >
        <q-card-section>
          Name: {{ userState.user.firstname }} {{ userState.user.lastname }}<br />
          E-Mail: {{ userState.user.mail }}<br />
          Roles: <ul
            v-for="role in userState.user.roles"
            v-bind:key="role"
          >
            <li>{{ role }}</li>
          </ul><br />
          Token expires: {{ userState.token.expires }}
        </q-card-section>
      </q-card>
    </q-page>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';
import { UserStateInterface } from '../../../store/module-user/state';

export default defineComponent({
  // name: 'PageName'
  setup(_, { root }) {
    const userState = computed(
      () => <UserStateInterface>root.$store.state.user
    );
    const a = ctx.root.$flaschengeistPlugins.mainLinks;
    return { a, userState };
  },
});
</script>
