{% extends "base.html" %}
{% block title %}Sessions · {{ current_project.name }} — Bento{% endblock %}
{% block content %}
<header class="page-header">
  <h1 class="page-title">Sessions <span class="title-count">{{ sessions|length }}</span></h1>
</header>

{% if sessions %}
<div class="table-wrap">
  <table class="data-table sessions-table">
    <colgroup>
      <col>
      <col class="col-model">
      <col class="col-version">
      <col class="col-status">
      <col class="col-tokens">
      <col class="col-cost">
      <col class="col-time">
      <col class="col-duration">
    </colgroup>
    <thead>
      <tr>
        <th>Session</th>
        <th>Model</th>
        <th>Version</th>
        <th>Status</th>
        <th>Tokens</th>
        <th>Cost</th>
        <th>Started</th>
        <th>Duration</th>
      </tr>
    </thead>
    <tbody>
      {% for s in sessions %}
      <tr onclick="location.href='/sessions/{{ s.id }}'">
        <td>
          {% set av = agent_avatar(s.agent_slug or '?') %}
          <div class="session-cell">
            <span class="avatar-md" style="background: {{ av.color }}">{{ av.abbr }}</span>
            <div class="session-cell-body">
              <div class="session-cell-agent">{{ s.agent_name or '—' }}</div>
              <div class="session-cell-title muted">{{ session_title(s) }}</div>
            </div>
          </div>
        </td>
        <td>
          {% if s.model %}<code class="model-pill">{{ s.model }}</code>{% else %}<span class="muted">—</span>{% endif %}
        </td>
        <td>
          {% if s.version_pin %}<code class="version-pill" title="{{ s.version_sha[:8] if s.version_sha else '' }}">{{ s.version_pin }}</code>{% else %}<span class="muted">—</span>{% endif %}
        </td>
        <td class="status-icon-cell">
          {% if s.status == 'running' %}
            <span class="status-icon state-working" title="working">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
            </span>
          {% elif s.reason == 'errored' %}
            <span class="status-icon state-error" title="errored">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>
            </span>
          {% elif s.reason == 'cancelled' %}
            <span class="status-icon state-cancelled" title="cancelled">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </span>
          {% else %}
            <span class="status-icon state-done" title="done">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
          {% endif %}
        </td>
        <td class="mono">{{ fmt_tokens(s.tokens_in) }} in / {{ fmt_tokens(s.tokens_out) }} out</td>
        <td class="mono">{{ fmt_cost(s.cost_usd) }}</td>
        <td class="muted"><time class="rel-time" datetime="{{ s.created_at }}" title="{{ fmt_ts(s.created_at) }}">{{ fmt_ago(s.created_at) }}</time></td>
        <td class="muted">{{ fmt_duration_ms(s.duration_ms) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if total_pages > 1 %}
<nav class="pagination">
  <span class="pagination-info muted small">
    Showing {{ ((page - 1) * page_size) + 1 }}–{{ ((page - 1) * page_size) + sessions|length }} of {{ total }}
  </span>
  <div class="pagination-controls">
    {% if page > 1 %}
      <a class="pagination-btn" href="?page={{ page - 1 }}" aria-label="Previous page">←</a>
    {% else %}
      <span class="pagination-btn disabled">←</span>
    {% endif %}
    <span class="pagination-page">Page {{ page }} of {{ total_pages }}</span>
    {% if page < total_pages %}
      <a class="pagination-btn" href="?page={{ page + 1 }}" aria-label="Next page">→</a>
    {% else %}
      <span class="pagination-btn disabled">→</span>
    {% endif %}
  </div>
</nav>
{% endif %}
{% else %}
<p class="empty-state">No sessions in <strong>{{ current_project.name }}</strong> yet.</p>
{% endif %}
{% endblock %}