{% extends "base.html" %}
{% block title %}{{ agent_name }} — Agents{% endblock %}

{% block content %}
<div class="page" id="agents-container">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
    <h1>Agents</h1>
    <div style="display:flex;gap:8px">
      <button class="btn btn-ghost" onclick="showTemplatesModal()">Browse Templates</button>
      <button class="btn btn-primary" onclick="showAgentModal(null)">+ New Agent</button>
    </div>
  </div>

  <!-- Tabs -->
  <div style="display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:24px">
    <button class="tab-btn active" id="tab-agents" onclick="switchTab('agents')">Agents</button>
    <button class="tab-btn" id="tab-status" onclick="switchTab('status')">Status</button>
  </div>

  <!-- ── Agents tab ── -->
  <div id="pane-agents">
    <div class="table-wrap">
      <table id="agents-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Model</th>
            <th>Schedule</th>
            <th>Sub-agents</th>
            <th>Status</th>
            <th>Last run</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr><td colspan="7" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ── Status tab ── -->
  <div id="pane-status" style="display:none">
    <div style="display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap">
      <label style="font-size:13px;color:var(--text-dim)">Timeframe:</label>
      <select id="status-since" onchange="loadAgentRuns()" style="
        background:var(--bg2);border:1px solid var(--border);color:var(--text);
        border-radius:4px;padding:4px 10px;font-size:13px;cursor:pointer
      ">
        <option value="today">Today</option>
        <option value="7d" selected>Last 7 days</option>
        <option value="30d">Last 30 days</option>
      </select>
    </div>
    <div class="table-wrap">
      <table id="runs-table">
        <thead>
          <tr>
            <th>Agent</th>
            <th>Started</th>
            <th>Duration</th>
            <th>Status</th>
            <th>Input tokens</th>
            <th>Output tokens</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr><td colspan="7" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
        </tbody>
      </table>
    </div>
    <div id="runs-totals" style="font-size:12px;color:var(--text-dim);margin-top:8px;text-align:right"></div>
  </div>
</div>

<!-- ── Agent modal ── -->
<div class="modal-overlay hidden" id="agent-modal">
  <div class="modal" style="max-width:560px;width:100%">
    <h3 id="agent-modal-title">New Agent</h3>
    <input type="hidden" id="a-id">

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div class="form-group">
        <label>Name</label>
        <input type="text" id="a-name" class="form-input" placeholder="My agent" required>
      </div>
      <div class="form-group">
        <label>Model</label>
        <select id="a-model" class="form-input"></select>
      </div>
    </div>

    <div class="form-group">
      <label>Description <span style="color:var(--text-dim)">(optional)</span></label>
      <input type="text" id="a-desc" class="form-input" placeholder="What does this agent do?">
    </div>

    <div class="form-group">
      <label>Prompt</label>
      <textarea id="a-prompt" class="form-input" rows="5"
                placeholder="Instructions for the agent…" style="resize:vertical"></textarea>
    </div>

    <div class="form-group">
      <label>Prompt mode</label>
      <div class="prompt-mode-toggle">
        <button type="button" class="pm-btn active" data-mode="combined"    onclick="setPromptMode('combined')">Combined</button>
        <button type="button" class="pm-btn"        data-mode="system_only" onclick="setPromptMode('system_only')">System only</button>
        <button type="button" class="pm-btn"        data-mode="agent_only"  onclick="setPromptMode('agent_only')">Agent only</button>
      </div>
      <input type="hidden" id="a-prompt-mode" value="combined">
      <div id="a-pm-hint" style="font-size:11px;color:var(--text-dim);margin-top:6px"></div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div class="form-group">
        <label>Schedule <span style="color:var(--text-dim)">(cron, optional)</span></label>
        <input type="text" id="a-schedule" class="form-input"
               placeholder="0 8 * * *" oninput="updateAgentCronPreview(this.value)">
        <div id="a-cron-preview" style="font-size:11px;color:var(--text-dim);margin-top:4px"></div>
      </div>
      <div class="form-group">
        <label>Max tool calls <span style="color:var(--text-dim)" id="a-mtc-hint">(default)</span></label>
        <input type="number" id="a-max-tool-calls" class="form-input" min="1" max="200"
               placeholder="Use system default" oninput="updateMtcHint()">
      </div>
    </div>

    <div class="form-group">
      <label>Allowed Tools <span style="color:var(--text-dim)">(none checked = all tools)</span></label>
      <div id="agent-tool-list" style="display:flex;gap:12px;flex-wrap:wrap;padding:8px 0">
        <span style="color:var(--text-dim);font-size:12px">Loading tools…</span>
      </div>
    </div>

    <div class="form-group" style="display:flex;gap:16px">
      <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
        <input type="checkbox" id="a-subagents">
        <span>Can create sub-agents</span>
      </label>
      <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
        <input type="checkbox" id="a-enabled" checked>
        <span>Enabled</span>
      </label>
    </div>

    <div class="modal-buttons">
      <button class="btn btn-ghost" onclick="closeAgentModal()">Cancel</button>
      <button class="btn btn-primary" onclick="saveAgent()">Save</button>
    </div>
  </div>
</div>

<!-- ── Run result modal ── -->
<div class="modal-overlay hidden" id="agent-run-modal">
  <div class="modal">
    <h3>Agent run started</h3>
    <div id="agent-run-output" style="
      background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
      padding:12px;font-family:monospace;font-size:12px;white-space:pre-wrap;
      max-height:300px;overflow-y:auto;margin:12px 0
    ">—</div>
    <div class="modal-buttons">
      <button class="btn btn-primary" onclick="closeAgentRunModal()">Close</button>
    </div>
  </div>
</div>

<!-- ── Templates modal ── -->
<div class="modal-overlay hidden" id="templates-modal">
  <div class="modal" style="max-width:720px;width:100%">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
      <h3>Agent Templates</h3>
      <button class="btn btn-ghost" onclick="closeTemplatesModal()">✕</button>
    </div>
    <div id="templates-list" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;max-height:60vh;overflow-y:auto">
      <div style="color:var(--text-dim);font-size:13px">Loading…</div>
    </div>
  </div>
</div>
{% endblock %}