{# P2-T01 — generic per-step Explorer placeholder.

  Renders deterministic / scrub / replay / io / gate / capture steps
  with the minimum metadata an operator needs while the per-type
  inspectors (P3) ship. The trace's ``explore →`` link should never
  500, so we always 200 here with a clear "coming next" banner.
#}
{% extends "admin_layout.html" %}

{% block page_title %}admin :: step :: {{ view.scan_id_short }} / {{ view.step_index_padded }}{% endblock %}

{% block breadcrumb %}
  <a href="/admin/dashboard">admin</a><span class="sep">/</span>
  <a href="/admin/scans">scans</a><span class="sep">/</span>
  <a href="{{ view.back_to_trace_url }}">{{ view.scan_id_short }}</a><span class="sep">/</span>
  <span class="here">step {{ view.step_index_padded }}</span>
{% endblock %}

{% block head_extra %}
{% if view.is_in_progress %}<meta http-equiv="refresh" content="30">{% endif %}
<style>
  .step-back {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -32px -24px 20px;
    padding: 8px 24px;
    background: color-mix(in oklab, var(--bg) 92%, var(--accent));
    border-bottom: 1px solid var(--rule);
    font-size: 11px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .step-back a { color: var(--ink); }
  .step-back a:hover { color: var(--accent); }
  .step-back .sep { color: var(--ink-3); }
  .step-back .pos {
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 10px;
  }
  .step-back .pos strong { color: var(--accent); font-weight: 700; }

  .ph-card {
    border: 1px dashed var(--rule-2);
    background: color-mix(in oklab, var(--bg-3) 70%, var(--bg-2));
    padding: 32px;
    text-align: center;
  }
  .ph-card .ph-title {
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 700;
  }
  .ph-card p { color: var(--ink-2); font-size: 12px; max-width: 56ch; margin: 0 auto 8px; }

  .meta-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border: 1px solid var(--rule);
    background: var(--bg-2);
    margin-bottom: 24px;
  }
  .meta-strip .ms-cell {
    padding: 12px 16px;
    border-right: 1px solid var(--rule);
  }
  .meta-strip .ms-cell:last-child { border-right: 0; }
  .meta-strip .ms-l {
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .meta-strip .ms-v {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
  }

  .err-row {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--danger);
    background: color-mix(in oklab, var(--danger) 10%, var(--bg));
    color: var(--ink);
    font-size: 12px;
  }
  .err-row code { color: var(--danger); font-weight: 600; }
  .err-row .tag { color: var(--danger); font-weight: 700; margin-right: 8px; letter-spacing: 0.06em; text-transform: uppercase; }
</style>
{% endblock %}

{% block content %}

<div class="step-back">
  <a href="{{ view.back_to_trace_url }}">&larr; back to trace</a>
  <span class="sep">·</span>
  <span class="pos">step <strong>{{ view.step_index_padded }}</strong> of <strong>{{ view.total_step_count }}</strong></span>
</div>

<div class="t55-eyebrow">02.1 — scan debug · step {{ view.step_index_padded }} · {{ view.step_type }}</div>
<h1 class="t55-h1">Step {{ view.step_index_padded }} &mdash; <span class="em">{{ view.step_name }}</span>
{% if view.is_cancelled_scan %}<span class="t55-pill muted" style="margin-left: 10px; vertical-align: middle;">[cancelled scan]</span>{% endif %}
</h1>
<p class="t55-lede">The per-type inspector for <code>{{ view.step_type }}</code> steps ships in P3. The basics below stay accurate while it's being built.</p>

{% if view.is_in_progress %}
<div class="err-row" style="border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--bg)); color: var(--ink);">
  <span class="tag" style="color: var(--accent);">// in progress</span>
  Step still running — refresh to update. Auto-refresh every 30s.
  <button type="button" onclick="window.location.reload();" style="margin-left:14px; background:transparent; border:1px solid var(--accent); color:var(--accent); padding:4px 10px; font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer;">manual refresh</button>
</div>
{% endif %}

{% if view.error_class %}
<div class="err-row">
  <span class="tag">[errored]</span>
  <code>{{ view.error_class }}</code>
  {% if view.error_message %}<div style="margin-top: 4px; color: var(--ink-2); font-family: var(--mono); font-size: 11px; word-break: break-all;">{{ view.error_message }}</div>{% endif %}
</div>
{% endif %}

<div class="meta-strip">
  <div class="ms-cell">
    <div class="ms-l">step type</div>
    <div class="ms-v">{{ view.step_type }}</div>
  </div>
  <div class="ms-cell">
    <div class="ms-l">duration</div>
    <div class="ms-v">{{ view.duration }}</div>
  </div>
  <div class="ms-cell">
    <div class="ms-l">status</div>
    <div class="ms-v"><span class="t55-pill {{ view.status_pill_class }}">{{ view.status_label }}</span></div>
  </div>
  <div class="ms-cell">
    <div class="ms-l">cost</div>
    <div class="ms-v">{{ view.cost }}</div>
  </div>
</div>

<section class="ph-card">
  <div class="ph-title">// coming in p3</div>
  <p>Inline rule rendering for detection / analysis / scrub / render / replay / io / gate steps lands in P3-T05..T15. The data is all in the trace today; the per-type rendering just isn't built yet.</p>
</section>

{% endblock %}