{% set show_service = show_service_column(sessions) %}
<div class="overflow-x-auto">
  <table class="min-w-[840px] w-full table-auto text-left text-xs">
    <thead>
      <tr class="border-b border-slate-800 text-[11px] uppercase tracking-wider text-slate-500">
        <th class="px-3 py-2 font-medium">Session</th>
        <th class="px-3 py-2 font-medium">Node ID</th>
        {% if show_service %}
          <th class="px-3 py-2 font-medium">Service</th>
        {% endif %}
        <th class="px-3 py-2 font-medium">Status</th>
        <th class="px-3 py-2 font-medium">Started</th>
        <th class="px-3 py-2 font-medium">Duration</th>
        <th class="px-3 py-2 font-medium">Traffic ↓/↑</th>
        {% if not recent %}
          <th class="px-3 py-2 font-medium">IP</th>
        {% endif %}
        <th class="px-3 py-2 text-right font-medium">Amount</th>
        {% if not recent %}
          <th class="px-3 py-2 text-right font-medium">Action</th>
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% for session in sessions %}
        <tr class="border-b border-slate-800/60 text-slate-300 transition-colors hover:bg-slate-800/40">
          <td class="px-3 py-2.5 font-mono tabular-nums text-slate-300" title="{{ session.get('uuid') }}">{{ truncate_value(session.get("uuid")) }}</td>
          <td class="px-3 py-2.5 tabular-nums text-slate-400">#{{ session.get("node_id") or "—" }}</td>
          {% if show_service %}
            <td class="px-3 py-2.5">
              <span class="inline-flex rounded px-1.5 py-0.5 text-[10px] font-semibold tracking-wide {{ session_service_badge_class(session.get('service')) }}">{{ session_service_label(session.get("service")) }}</span>
            </td>
          {% endif %}
          <td class="px-3 py-2.5">
            <span class="inline-flex rounded px-1.5 py-0.5 text-[10px] font-medium {{ session_status_badge_class(session, recent) }}">{{ session_status_label(session, recent) }}</span>
          </td>
          <td class="px-3 py-2.5 tabular-nums text-slate-400">{{ format_datetime(session.get("started_at")) }}</td>
          <td class="px-3 py-2.5 tabular-nums text-slate-400">{{ format_duration(session.get("duration")) }}</td>
          <td class="px-3 py-2.5 tabular-nums text-slate-400">{{ format_bytes(session.get("rx")) }} / {{ format_bytes(session.get("tx")) }}</td>
          {% if not recent %}
            <td class="px-3 py-2.5 font-mono text-slate-400">{{ session.get("public_ip") or session.get("ip") or "—" }}</td>
          {% endif %}
          <td class="px-3 py-2.5 text-right tabular-nums text-slate-400">{{ session.get("charge_amount") or "—" }}</td>
          {% if not recent %}
            <td class="px-3 py-2.5 text-right">
              <a href="/playground/sessions?{{ 'tab=current&stop_uuid=' ~ session.get('uuid') }}" class="rounded border border-red-800/50 px-2 py-0.5 text-[11px] text-red-500 transition-colors hover:border-red-600 hover:text-red-400">Stop</a>
            </td>
          {% endif %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>