<%

var _rows = (replay.replay || []).slice().reverse();
var _order = [], _byEngine = {};
_rows.forEach(function (r) {
  var k = r.engine || '';
  if (!_byEngine[k]) { _byEngine[k] = []; _order.push(k); }
  _byEngine[k].push(r);
});

_order.sort(function (a, b) { return (a ? 0 : 1) - (b ? 0 : 1); });
%>
<div style="display:flex; align-items:center; gap:9px; margin-bottom:2px">
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color:var(--teal-600); flex:none"><path d="M2.5 8a5.5 5.5 0 105.5-5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M2.5 3v3h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

  <b style="font-size:var(--fs-base)">How each engine answered this, over time</b>
</div>

<% _order.forEach(function (eng, gi) { var rows = _byEngine[eng]; %>
  <div style="<%= gi ? 'margin-top:20px; padding-top:16px; border-top:1px solid var(--line)' : 'margin-top:12px' %>">
    <div style="display:flex; align-items:center; gap:9px; margin-bottom:4px">
      <% if (eng) { %><%- include('./engine-mark', { engine: eng, size: 'sm' }) %><% } %>

      <b style="font-size:var(--fs-base)"><%= eng || 'Earlier runs' %></b><% if (!eng) { %><%- h.ihelp('Earlier runs', 'Recorded before answers were kept per engine, so the engine is unknown.') %><% } %>
      <span class="rr-meta"><%= rows.length %> run<%= rows.length === 1 ? '' : 's' %></span>
    </div>

    <% rows.forEach(function (r, i) { %>
      <div style="display:grid; grid-template-columns:92px minmax(0,1fr); gap:16px; padding:13px 0; <%= i < rows.length - 1 ? 'border-bottom:1px solid var(--line-2)' : '' %>">
        <div>

          <div class="disp" style="font-weight:600; font-size:var(--fs-sm)"><%= r.date %></div>

          <% var _m = r.rank ? ('rank #' + r.rank) : (r.named === true ? 'mentioned' : (r.named === false ? 'not mentioned' : '')); %>
          <% if (_m) { %><div class="rr-meta"><%= _m %></div><% } %>

          <% var _d = r.delta;
             if (_d === 'dropped out' && r.named === true) _d = (r.rankKnown === true) ? 'not in the list' : ''; %>
          <% if (_d && _d !== 'flat') { %><div class="rr-meta"><%= _d %></div><% } %>
          <% if (i === 0) { %><span class="chip pos" style="margin-top:6px">latest</span><% } %>
        </div>
        <% if (!r.snapshot) { %>

          <div class="rr-meta" style="align-self:center">No answer was shown for this question in this run.</div>
        <% } else { %>

          <div class="bubble ansdoc" style="background:var(--surface-2); line-height:1.65; max-height:300px; overflow:auto"><%- h.answerDoc(r.snapshot) %></div>
        <% } %>
      </div>
    <% }) %>
  </div>
<% }) %>
