<script setup lang="ts">
import type { User } from '@/api/auth';
import { useAuthStore } from '@/stores/auth';
import { computed, type Ref } from 'vue';

const authStore = useAuthStore()

const user: Ref<User | null> = computed(() => {
  if (!authStore.state) return null
  if (authStore.state.adminAsUser) {
    return authStore.state.adminAsUser
  }
  return authStore.state.user
})
</script>
<template>
  <main v-if="user" class="centered-content">
    <h1 class="align-center">My Account</h1>
    <table class="account-properties-table">
      <tbody>
        <tr>
          <th>Internal ID</th>
          <td>{{ user.id }}</td>
        </tr>
        <tr>
          <th>Username</th>
          <td>{{ user.username }}</td>
        </tr>
        <tr>
          <th>Created At</th>
          <td>{{ new Date(user.createdAt).toLocaleString() }}</td>
        </tr>
        <tr>
          <th>Account Locked</th>
          <td>{{ user.isLocked }}</td>
        </tr>
        <tr>
          <th>Administrator</th>
          <td>{{ user.isAdmin }}</td>
        </tr>
      </tbody>
    </table>
    <p>
      Please contact Andrew Lalis for help with account administration or to report any bugs you find!
    </p>
    <p>
      Suggestions for new features are also highly encouraged!
    </p>
    <p>
      Contact Andrew at <a class="link link-ext" href="https://www.andrewlalis.com/contact"
        target="_blank">andrewlalis.com/contact</a>.
    </p>
  </main>
</template>
<style scoped>
.account-properties-table {
  width: 100%;
  border-collapse: collapse;
}

.account-properties-table :is(th, td) {
  border: 1px solid gray;
  padding: 0.25em;
}

.account-properties-table th {
  text-align: left;
}

.account-properties-table td {
  text-align: right;
  font-family: 'SourceCodePro', monospace;
}
</style>
