{% extends "mockingbird/base.html" %}
{% block content %}
<div class="row"><span class="muted">Live: refreshes every 1.5s</span><label class="right" style="font-weight:400"><input type="checkbox" id="live" checked> live</label><button class="sec" id="clear">Clear log</button></div>
<table style="margin-top:12px"><thead><tr><th>Time</th><th>Request</th><th>Matched</th><th>Status</th><th>Latency</th><th>State</th></tr></thead><tbody id="rows"></tbody></table>
<pre id="detail" style="margin-top:12px;display:none"></pre>
{% endblock %}
{% block scripts %}
<script>
const rows = document.getElementById('rows'), detail = document.getElementById('detail');
let last = 0;
const cell = (tr, text, cls) => { const td = document.createElement('td'); td.textContent = text; if (cls) td.className = cls; tr.append(td); return td; };
function add(x) {
  const tr = document.createElement('tr'); tr.style.cursor = 'pointer';
  cell(tr, new Date(x.time).toLocaleTimeString());
  const q = Object.entries(x.query).map(([k, v]) => k + '=' + v.join(',')).join('&');
  cell(tr, x.method + ' ' + x.path + (q ? '?' + q : ''), 'mono');
  cell(tr, x.matched || 'no match', x.matched ? '' : 'muted');
  cell(tr, x.status || 'dropped', 's' + String(x.status)[0]);
  cell(tr, x.latency_ms.toFixed(1) + ' ms' + (x.chaos ? '  [' + x.chaos + ']' : ''), x.chaos ? 'chaos' : '');
  cell(tr, x.state_before === x.state_after ? (x.state_after || '-') : x.state_before + ' -> ' + x.state_after);
  tr.onclick = () => { detail.style.display = 'block'; detail.textContent = JSON.stringify({headers: x.headers, body: x.body}, null, 2); };
  rows.prepend(tr);
}
async function poll() {
  if (!document.getElementById('live').checked) return;
  const r = await fetch(`{% url 'index' %}api/mocks/{{ api.slug }}/requests?limit=200&after=${last}`);
  const d = await r.json();
  d.requests.reverse().forEach(x => { add(x); last = Math.max(last, x.id); });
}
document.getElementById('clear').onclick = async () => { await fetch('{% url 'index' %}api/mocks/{{ api.slug }}/requests', {method: 'DELETE'}); rows.replaceChildren(); };
poll(); setInterval(poll, 1500);
</script>
{% endblock %}