<script setup lang="ts">
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore()
</script>
<template>
  <main v-if="authStore.state" class="centered-content">
    <h1 class="align-center">My Account</h1>
    <table class="account-properties-table">
      <tbody>
        <tr>
          <th>Internal ID</th>
          <td>{{ authStore.state.user.id }}</td>
        </tr>
        <tr>
          <th>Username</th>
          <td>{{ authStore.state.user.username }}</td>
        </tr>
        <tr>
          <th>Created At</th>
          <td>{{ new Date(authStore.state.user.createdAt).toLocaleString() }}</td>
        </tr>
        <tr>
          <th>Account Locked</th>
          <td>{{ authStore.state.user.isLocked }}</td>
        </tr>
        <tr>
          <th>Administrator</th>
          <td>{{ authStore.state.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>
