{% extends "base.html" %}
{% block title %}Account — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>Account</h1>
    <p class="subtitle" id="account-who">Loading…</p>
  </div>
</div>
<div class="form-card form-card-wide">
  <h3 style="font-weight:700;letter-spacing:-0.02em">API tokens</h3>
  <p class="muted">Bearer tokens for scripts and CI. Shown once on create.</p>
  <div class="inline-form" style="margin:1rem 0">
    <input type="text" id="token-name" placeholder="Token name" style="flex:1">
    <button class="btn btn-primary" id="create-token-btn" type="button">Create token</button>
  </div>
  <pre id="token-once" class="muted" style="display:none;white-space:pre-wrap"></pre>
  <ul id="token-list" class="version-list"><li class="muted">Loading…</li></ul>
</div>
{% endblock %}
{% block scripts %}
<script>
async function loadMe() {
  try {
    const me = await api('/api/auth/me');
    document.getElementById('account-who').textContent =
      `${me.display_name || me.email} · ${me.is_local ? 'local mode' : me.email}`;
  } catch (e) {
    document.getElementById('account-who').textContent = e.message;
  }
}
async function loadTokens() {
  const list = document.getElementById('token-list');
  try {
    const rows = await api('/api/auth/tokens');
    if (!rows.length) {
      list.innerHTML = '<li class="muted">No tokens yet.</li>';
      return;
    }
    list.innerHTML = rows.map((t) => `
      <li class="version-item" style="justify-content:space-between">
        <div>
          <strong>${t.name}</strong>
          <div class="muted" style="font-size:.8rem">${t.token_prefix}… · ${t.created_at || ''}</div>
        </div>
        <button class="btn-icon" data-del-token="${t.id}" title="Revoke">×</button>
      </li>
    `).join('');
    list.querySelectorAll('[data-del-token]').forEach((btn) => {
      btn.addEventListener('click', async () => {
        await api(`/api/auth/tokens/${btn.dataset.delToken}`, { method: 'DELETE' });
        loadTokens();
      });
    });
  } catch (e) {
    list.innerHTML = `<li class="muted">${e.message}</li>`;
  }
}
document.getElementById('create-token-btn')?.addEventListener('click', async () => {
  try {
    const res = await api('/api/auth/tokens', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: document.getElementById('token-name').value.trim() || 'token' }),
    });
    const once = document.getElementById('token-once');
    once.style.display = 'block';
    once.textContent = `Copy now (shown once):\n${res.token}`;
    loadTokens();
  } catch (e) {
    toast(e.message, 'error');
  }
});
loadMe();
loadTokens();
</script>
{% endblock %}