{% extends "base.html" %}
{% block content %}
<div id="loading" class="text-center text-gray-500">Loading…</div>

<div id="content" class="hidden max-w-xl mx-auto bg-white p-6 rounded-lg border">
  <h2 class="text-lg font-semibold mb-2">Hello, <span id="name"></span></h2>
  <p class="text-sm text-gray-600 mb-4">
    You're signed in as <span id="email"></span>. This is where your app starts —
    edit <code class="bg-gray-100 px-1 rounded">templates/dashboard.html</code>
    and <code class="bg-gray-100 px-1 rounded">main.py</code> to build it out.
  </p>
  <button id="logout" class="px-3 py-1.5 text-sm rounded border">Log out</button>
</div>

<!-- ─── write your app here ↓ ─────────────────────────────────────────────── -->
<!-- Replace the placeholder above with your actual UI. Use fetch() against    -->
<!-- your routes, attaching `Authorization: Bearer ${token}` for protected     -->
<!-- ones. The token is in localStorage as `parbaked_token`.                   -->
<!-- ─────────────────────────────────────────────────────────────────────── -->

<script>
const token = localStorage.getItem('parbaked_token');
if (!token) {
  window.location = '/login';
}

fetch('/auth/me', { headers: { Authorization: 'Bearer ' + token } })
  .then(async (res) => {
    if (!res.ok) {
      localStorage.removeItem('parbaked_token');
      window.location = '/login';
      return;
    }
    const user = await res.json();
    document.getElementById('name').textContent = user.name;
    document.getElementById('email').textContent = user.email;
    document.getElementById('loading').classList.add('hidden');
    document.getElementById('content').classList.remove('hidden');
  })
  .catch(() => {
    localStorage.removeItem('parbaked_token');
    window.location = '/login';
  });

document.getElementById('logout').addEventListener('click', () => {
  localStorage.removeItem('parbaked_token');
  window.location = '/';
});
</script>
{% endblock %}