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

const auth = useAuthStore()
</script>

<template>
  <section class="card">
    <h1>Your todo list</h1>
    <p class="muted">
      Placeholder page. The list and its items arrive in the next stage — for now
      this screen just proves you are authenticated against the REST API.
    </p>

    <div v-if="!auth.emailVerified" class="notice">
      Your email address <strong>{{ auth.user?.email }}</strong> has not been
      verified yet. Verification will be added in a later stage.
    </div>

    <dl class="facts">
      <div>
        <dt>Signed in as</dt>
        <dd>{{ auth.user?.email }}</dd>
      </div>
      <div>
        <dt>Account created</dt>
        <dd>{{ auth.user?.created_at ?? '—' }}</dd>
      </div>
      <div>
        <dt>Email verified</dt>
        <dd>{{ auth.emailVerified ? 'yes' : 'no' }}</dd>
      </div>
    </dl>
  </section>
</template>
