<template>
  <div class="content-l">
    <div class="spaced-center">
      <h2>Users</h2>
      <UiButton icon="person_add" reverse @click="() => useRouter().push('/account/settings/users/add')">Add</UiButton>
    </div>
    <div class="content-l">
      <div class="user-container">
        <div class="contents">
          <h3 class="gray">Username</h3>
          <h3 class="gray">E-Mail</h3>
          <h3 class="gray">Roles</h3>
        </div>
        <div v-for="user in users" class="contents user-row">
          <p>{{ user.username }}</p>
          <p>{{ Optional.ofNullable(user.email).orElse("-") }}</p>
          <p v-if="user.roles">{{ user.roles.join(", ") }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

onMounted(() => {
  User.get((_users) => {
    users.value = _users;
  });
});
</script>

<style scoped>
.user-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 0.5rem;
}
.user-container > :first-child > * {
  margin-bottom: 0.5rem;
}
.contents {
  display: contents;
}
.contents > * {
  padding: 0.5rem;
}
.gray {
  background-color: var(--shade-light);
}
.user-row > * {
  background-color: var(--tile-color);
}
.contents > :first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.contents > :last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.25rem;
}
</style>