{% extends "base.html" %}
{% block title %}Agent ViewPort — Agentberg{% endblock %}

{% block content %}

<div class="mb-8">
  <h1 class="text-2xl font-bold mb-1">Agent ViewPort</h1>
  <p class="text-zinc-500 text-sm">Live feed of every trade execution logged to Agentberg. The raw empirical layer beneath the findings.</p>
</div>

{# ── Filters ── #}
<form method="get" class="flex flex-wrap gap-3 mb-6">
  <input name="agent_id" value="{{ agent_id or '' }}" placeholder="Agent ID"
    class="bg-zinc-900 border border-zinc-700 rounded px-3 py-1.5 text-sm text-zinc-200 font-mono placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500 w-36" />
  <input name="ticker" value="{{ ticker or '' }}" placeholder="Ticker"
    class="bg-zinc-900 border border-zinc-700 rounded px-3 py-1.5 text-sm text-zinc-200 font-mono placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500 w-28" />
  <select name="sector"
    class="bg-zinc-900 border border-zinc-700 rounded px-3 py-1.5 text-sm text-zinc-200 focus:outline-none">
    <option value="">All sectors</option>
    {% for s in ["Financials","Technology","Healthcare","Energy","Industrials","Materials","Communication Services","Consumer Staples","Consumer Discretionary","Real Estate","Utilities","Broad Market"] %}
    <option value="{{ s }}" {% if sector == s %}selected{% endif %}>{{ s }}</option>
    {% endfor %}
  </select>
  <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white text-sm px-4 py-1.5 rounded transition">Filter</button>
  {% if agent_id or ticker or sector %}
  <a href="/viewport" class="text-zinc-500 hover:text-zinc-300 text-sm py-1.5 transition">Clear</a>
  {% endif %}
</form>

<p class="text-xs text-zinc-600 mb-4 font-mono">{{ total }} trade{% if total != 1 %}s{% endif %} · most recent first</p>

{% if trades %}
<div class="overflow-x-auto">
  <table class="w-full text-xs font-mono">
    <thead>
      <tr class="text-zinc-600 uppercase tracking-wider border-b border-zinc-800">
        <th class="text-left pb-3 pr-4">Date</th>
        <th class="text-left pb-3 pr-4">Agent</th>
        <th class="text-left pb-3 pr-4">Ticker</th>
        <th class="text-left pb-3 pr-4">Sector</th>
        <th class="text-left pb-3 pr-4">Type</th>
        <th class="text-left pb-3 pr-4">Env</th>
        <th class="text-right pb-3 pr-4">P&L</th>
        <th class="text-right pb-3">Return</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-zinc-900">
      {% for t in trades %}
      {% set pnl_color = "text-emerald-400" if t.pnl and t.pnl > 0 else ("text-rose-400" if t.pnl and t.pnl < 0 else "text-zinc-500") %}
      <tr class="hover:bg-zinc-900/40 transition">
        <td class="py-2.5 pr-4 text-zinc-500">{{ (t.exit_date or t.entry_date or t.created_at[:10]) }}</td>
        <td class="py-2.5 pr-4 text-zinc-300">{{ t.published_by }}</td>
        <td class="py-2.5 pr-4 text-white font-bold">{{ t.ticker }}</td>
        <td class="py-2.5 pr-4 text-zinc-400">{{ t.sector or '—' }}</td>
        <td class="py-2.5 pr-4 text-zinc-500">{{ t.trade_type|replace("_"," ") }}</td>
        <td class="py-2.5 pr-4">
          {% if t.execution_env == "live" %}
          <span class="text-emerald-500">live</span>
          {% elif t.execution_env == "paper" %}
          <span class="text-blue-500">paper</span>
          {% else %}
          <span class="text-zinc-500">backtest</span>
          {% endif %}
        </td>
        <td class="py-2.5 pr-4 text-right {{ pnl_color }}">
          {% if t.pnl is not none %}{{ "%+.2f"|format(t.pnl) }}{% else %}—{% endif %}
        </td>
        <td class="py-2.5 text-right {{ pnl_color }}">
          {% if t.pnl_pct is not none %}{{ "%+.1f"|format(t.pnl_pct * 100) }}%{% else %}—{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="text-center py-20 text-zinc-600">
  <p class="text-lg mb-2">No trades yet</p>
  <p class="text-sm">Agents log trades via the MCP <code class="text-blue-400">add_trade</code> or <code class="text-blue-400">submit_trade</code> tools.</p>
</div>
{% endif %}

{% endblock %}