{# T12: header banner -- target URL, intent_text, starter_template,
   abbreviated clarifying Q&A, flow_confirm summary. Replaces the
   v0.1.0 title.html + meta_grid.html stack. Inline styles because
   styles.css is byte-pinned to the mockup (see
   tests.unit.test_static_styles); we reuse the existing CSS variables
   so both light + dark themes render the same markup. #}

{# Friendly labels for the 7 starter templates. ``custom`` is the
   default; everything else maps to a single-word badge. #}
{% set _template_labels = {
  'products': 'Product listings',
  'stocks': 'Stock prices',
  'realestate': 'Real-estate listings',
  'jobs': 'Job postings',
  'reviews': 'Reviews',
  'news': 'News articles',
  'custom': 'Custom intent',
} %}
{% set _template_label = _template_labels.get(report.starter_template, report.starter_template or 'Custom intent') %}

<header class="intent-banner"
        style="margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--line);">
  <h1 style="margin:0 0 8px;">Scan report for <em>{{ report.target_domain }}</em></h1>
  <div class="subtitle">
    <a href="{{ report.target_url | safe_url }}">{{ report.target_url }}</a>
    {% set req_count = report.capture_metadata.get('request_count') if report.capture_metadata else None %}
    &nbsp;&middot;&nbsp; captured {{ report.created_at }}
    {% if req_count is not none %}
    &nbsp;&middot;&nbsp; {{ req_count }} requests
    {% endif %}
  </div>

  <div class="intent-grid"
       style="margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:start;font-family:'Inter Tight',sans-serif;font-size:14px;line-height:1.5;">
    <div style="font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);padding-top:2px;">Template</div>
    <div>
      <span class="pill med" style="display:inline-block;">{{ _template_label }}</span>
    </div>

    <div style="font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);padding-top:2px;">Intent</div>
    <div style="color:var(--ink);">
      {% if report.skipped_filter %}
      {# T13: user explicitly opted into the v0.1.x-style generic report
         on the post-capture confirmation step. Show a neutral marker
         instead of the original (now-irrelevant) intent text. #}
      <span style="color:var(--ink-2);font-style:italic;">Generic scan &mdash; no intent filtering applied.</span>
      {% elif report.intent_text %}
      {{ report.intent_text }}
      {% else %}
      <span style="color:var(--ink-3);font-style:italic;">No intent recorded for this scan.</span>
      {% endif %}
    </div>

    {% if report.flow_confirm_result and report.flow_confirm_result.get('flow_summary') %}
    <div style="font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);padding-top:2px;">Flow</div>
    <div style="color:var(--ink-2);">
      {{ report.flow_confirm_result.get('flow_summary') }}
    </div>
    {% endif %}
  </div>

  {# Per-phase scan timings: surfaced as a compact strip so users see
     capture / validation / scrub+upload / total wall-clock at a glance.
     The strip is hidden when the blob does not carry scan_timings
     (pre-fix-#4 captures). The em-dash sentinel handles JSONB
     round-trip oddities (string / list / dict values). #}
  {% set timings = report.scan_timings or {} %}
  {% if timings | length > 0 %}
  {% set capture_secs = timings.get('capture_seconds') %}
  {% set scrub_upload_secs = timings.get('scrub_upload_seconds') %}
  {% set total_secs = timings.get('total_seconds') %}
  {% if 'validation_seconds' in timings and timings['validation_seconds'] is none %}
    {% set validation_label = 'skipped' %}
  {% else %}
    {% set validation_label = timings.get('validation_seconds') | format_duration %}
  {% endif %}
  <div class="timing-strip"
       style="margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);">
    <div><span style="color:var(--ink-3);">Capture duration:</span> <span style="color:var(--ink);">{{ capture_secs | format_duration }}</span></div>
    <div><span style="color:var(--ink-3);">Validation:</span> <span style="color:var(--ink);">{{ validation_label }}</span></div>
    <div><span style="color:var(--ink-3);">Scrub + upload:</span> <span style="color:var(--ink);">{{ scrub_upload_secs | format_duration }}</span></div>
    <div><span style="color:var(--ink-3);">Total wall-clock:</span> <span style="color:var(--ink);">{{ total_secs | format_duration }}</span></div>
  </div>
  {% endif %}

  {% if report.clarifying_qa %}
  <details style="margin-top:14px;color:var(--ink-2);font-size:13px;">
    <summary style="cursor:pointer;color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;">
      Show clarifying Q&amp;A ({{ report.clarifying_qa | length }})
    </summary>
    <ol style="margin:10px 0 0;padding-left:20px;">
      {% for entry in report.clarifying_qa %}
      <li style="margin-bottom:8px;">
        <strong style="color:var(--ink);">{{ entry.get('question', '') }}</strong><br/>
        <span style="color:var(--ink-2);">{{ entry.get('answer', '') }}</span>
      </li>
      {% endfor %}
    </ol>
  </details>
  {% endif %}
</header>