{% if error %}
<div class="error">{{ error }}</div>
{% endif %}
{% if result %}
<div class="response-meta">
  <span class="status-code s{{ result.status // 100 }}xx">{{ result.status }} {{ result.reason }}</span>
  <span>{{ "%.0f" | format(result.elapsed_ms) }} ms</span>
  <span>{{ size }}</span>
  <span class="muted">{{ result.http_version }}</span>
  {% if result.redirects %}
  <span class="muted">{{ result.redirects | length }} redirect(s) → {{ result.url }}</span>
  {% endif %}
</div>
{% endif %}
{% if results %}
<ul class="check-results">
  {% for text, passed, actual in results %}
  <li class="{{ 'pass' if passed else 'fail' }}">
    <span class="mark">{{ "✓" if passed else "✗" }}</span>
    <code>{{ text | replace("@expect ", "") }}</code>
    {% if not passed %}<span class="muted small">got {{ actual }}</span>{% endif %}
  </li>
  {% endfor %}
</ul>
{% endif %}
{% if outcome and outcome.missing %}
<p class="warn-text small">Nothing found to capture for: {{ outcome.missing | join(", ") }}</p>
{% endif %}
{% if captured %}
<div class="captured" id="captured">
  <span class="muted small">Captured, used by later requests:</span>
  {% for name, val in captured %}
  <span class="captured-item {% if name in new_captures %}new{% endif %}"><code>{{ name }}</code> = <code>{{ val }}</code></span>
  {% endfor %}
  <button type="button" class="ghost small-button" hx-post="/captured/clear" hx-target="#captured" hx-swap="outerHTML">Clear</button>
</div>
{% endif %}
{% if result or sent %}
<div class="tabs" data-tabs>
  <div class="tab-list" role="tablist">
    {% if result %}
    <button type="button" role="tab" data-tab="r-body" aria-selected="true">Body</button>
    <button type="button" role="tab" data-tab="r-headers" aria-selected="false">Headers ({{ headers | length }})</button>
    {% endif %}
    <button type="button" role="tab" data-tab="r-sent" aria-selected="{{ 'false' if result else 'true' }}">Request sent</button>
  </div>
  {% if result %}
  <div class="tab-panel" data-panel="r-body">
    <pre class="code">{{ body }}</pre>
  </div>
  <div class="tab-panel" data-panel="r-headers" hidden>
    <table class="headers">
      {% for key, value in headers %}
      <tr><th>{{ key }}</th><td>{{ value }}</td></tr>
      {% endfor %}
    </table>
  </div>
  {% endif %}
  <div class="tab-panel" data-panel="r-sent" {% if result %}hidden{% endif %}>
    <pre class="code">{{ sent }}</pre>
    <p class="muted small">Secret values are masked.</p>
  </div>
</div>
{% endif %}