{% extends "base.html" %}
{% block title %}Dashboard - Invincible{% endblock %}
{% block content %}
<style>
  .card .spark { display: block; width: 100%; height: 36px;
                 margin-top: 0.6rem; }
  .card .spark polyline { fill: none; stroke: var(--accent);
                          stroke-width: 2; stroke-linejoin: round;
                          stroke-linecap: round; }
  .card .spark .area { fill: var(--accent-dim); stroke: none; }
</style>
<h2>Dashboard</h2>
<p class="muted">Overview for <strong>{{ user_email }}</strong></p>

{% if needs_setup %}
<div class="banner">
  <strong>You're 2 steps away from your first chat.</strong><br>
  <a href="/dashboard/setup">Set up your gateway →</a>
  <span class="muted">(connect a provider, create your API key)</span>
</div>
{% endif %}

<div class="cards">
  <div class="card" data-card="projects"><span class="num">{{ counts.projects }}</span><span class="label">Projects</span></div>
  <div class="card" data-card="sessions"><span class="num">{{ counts.sessions }}</span><span class="label">Sessions</span></div>
  <div class="card" data-card="api-keys"><span class="num">{{ counts.api_keys }}</span><span class="label">Active API keys</span></div>
  <div class="card" data-card="tasks"><span class="num">{{ counts.tasks }}</span><span class="label">Active tasks</span></div>
  <div class="card" data-card="memories"><span class="num">{{ counts.memories }}</span><span class="label">Memories</span></div>
  <div class="card" data-card="usage-7d"><span class="num">{{ counts.usage_7d | compactnum }}</span><span class="label">Tokens (7d)</span>
    {% if sparkline.points %}
    <svg class="spark" viewBox="0 0 160 36" preserveAspectRatio="none"
         role="img" aria-label="Tokens per day, last 7 days">
      <polygon class="area"
               points="0,36 {{ sparkline.points }} 160,36"/>
      <polyline points="{{ sparkline.points }}"/>
    </svg>
    {% endif %}
  </div>
</div>

<h3>Recent sessions</h3>
<div class="table-scroll">
<table>
  <thead><tr><th>Session</th><th>Project</th><th>Updated</th></tr></thead>
  <tbody>
  {% for s in recent_sessions %}
  <tr class="client-session-row">
    <td><a href="/dashboard/sessions/{{ s.id }}"><code>{{ s.client_session_id }}</code></a></td>
    <td>{% set pname = project_names.get(s.project_id) %}<span
        {% if pname %}title="project #{{ s.project_id }}"{% endif %}>{% if pname %}{{ pname }}{% else %}<code class="muted">#{{ s.project_id }}</code>{% endif %}</span></td>
    <td class="muted" title="{{ s.updated_at | absdate }}">{{ s.updated_at | timeago }}</td>
  </tr>
  {% else %}
  <tr><td colspan="3" class="empty">No sessions yet. <a
      href="/dashboard/setup">Run your first chat &rarr;</a></td></tr>
  {% endfor %}
  </tbody>
</table>
</div>
{% endblock content %}