<template>
    <div class="content-l">
        <div class="left-center">
            <h3>Users</h3>
            <UiButton icon="add" class="square small" @click="() => goto(3.5)"></UiButton>
        </div>
        <div class="resource-container user-container">
            <div class="header">
                <p>Username</p>
                <p>E-Mail</p>
                <p>Roles</p>
                <p>Initial</p>
            </div>
            <div class="resource" v-for="user, index in users" :class="{ even: index % 2 }">
                <p class="grid-element">{{ user.username }}</p>
                <p class="grid-element"><span v-if="user.email">{{ user.email }}</span><span v-else>-</span></p>
                <p class="grid-element" v-if="user.roles">{{ user.roles.join(", ") }}</p>
                <p class="grid-element">{{ user.initial === true }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { User } from '~/classes/User';
import { getUsers } from '~/requests/user';

defineProps<{
    goto: (tab: number) => void;
}>();

const users: Ref<User[] | undefined> = ref(undefined);

onMounted(() => {
    getUsers((_users: User[]) => {
        users.value = _users;
    });
})


</script>

<style scoped>
.user-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
</style>