<template>
    <div class="content-l">
        <h1>Hello, {{account.firstname}} {{account.lastname}}</h1>
        <div class="col-2">
            <div class="tile-m spaced-center">
                <p>Total Groups</p>
                <p v-if="groups.data"><b>{{groups.data.length}}</b></p>
            </div>
            <div class="tile-m spaced-center">
                <p>Total Artifacts</p>
                <p v-if="artifacts.data"><b>{{artifacts.data.length}}</b></p>
            </div>
        </div>
        <h2>Recent Events</h2>
        <EventList></EventList>
    </div>
</template>

<script setup lang="ts">
import EventList from "~/components/events/EventList.vue";
import type {Group} from "~/components/group/Group";
import type {Artifact} from "~/components/artifact/Artifact";
import {getAccount} from "~/auth/Account";

const groups = useGet<Group[]>("/api/groups");
const artifacts = useGet<Artifact[]>("/api/artifacts");

const account = getAccount();
</script>

<style scoped>

</style>