{% extends "components/_cc_shell.html" %}

{% block title %}fs-report · Run Log{% endblock %}

{% block head %}
<style>
  /* Run-log page — built on the shared Precision Noir tokens. */
  .rl-callout{display:flex;gap:13px;align-items:flex-start;
    background:var(--sev-critical-bg);
    border:1px solid color-mix(in srgb,var(--sev-critical) 40%,transparent);
    border-radius:var(--r-lg);padding:15px 17px;margin-bottom:18px}
  .rl-callout .rl-ico{flex:none;color:var(--sev-critical);margin-top:1px}
  .rl-callout .rl-ico svg{width:20px;height:20px}
  .rl-callout .rl-body{font-size:13px;line-height:1.6;color:var(--ink-body)}
  .rl-callout .rl-body strong{color:var(--ink-strong)}
  .rl-callout a{color:var(--accent);font-weight:600;text-decoration:none}
  .rl-callout a:hover{text-decoration:underline}
  .rl-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .rl-tag{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute);
    background:var(--surface-subtle);border:1px solid var(--hairline);
    border-radius:var(--r-sm);padding:3px 9px}
  .rl-tag b{color:var(--ink-strong);font-weight:600}
  /* Dark code surface — same treatment as .fr-cli / .ex-code (see tweaks.css). */
  .rl-log{background:#080b14;border:1px solid var(--hairline);border-radius:var(--r-md);
    padding:14px 16px;font-family:var(--font-mono);font-size:11.5px;line-height:1.65;
    color:var(--ink-body);white-space:pre-wrap;word-break:break-word;
    max-height:62vh;overflow:auto;margin:0}
  .rl-empty{display:flex;flex-direction:column;gap:5px;align-items:center;
    padding:34px 16px;text-align:center}
  .rl-empty .rl-empty-t{color:var(--ink-mute);font-size:13px}
  .rl-empty .rl-empty-s{color:var(--ink-faint);font-size:11.5px}
  /* Neutral (non-failure) callout — softer than the critical-tinted one. */
  .rl-callout.rl-neutral{background:var(--surface-subtle);
    border-color:var(--hairline)}
  .rl-callout.rl-neutral .rl-ico{color:var(--ink-mute)}
  .rl-trunc{font-size:11px;color:var(--ink-mute);margin:0 0 8px;
    font-family:var(--font-mono)}
</style>
{% endblock %}

{% block content %}
<div class="page-head fade-up">
  <div class="ptitle">
    <span class="eyebrow">{% if run_errored %}Failed report run{% else %}Run log{% endif %}</span>
    <h1>Run Log</h1>
    <span class="sub">Run <span class="mono">{{ run_id }}</span>{% if run_recipes %} · {{ run_recipes[0] }}{% if run_recipes | length > 1 %} +{{ run_recipes | length - 1 }}{% endif %}{% endif %}{% if scope %} · {{ scope }}{% endif %}</span>
  </div>
  <div class="head-actions">
    <a class="btn btn-ghost" href="/"><i data-lucide="layout-dashboard"></i> Command Center</a>
    {% if log_found %}
    <a class="btn btn-primary" href="/api/run/{{ run_id }}/log?download=1"
       download="fs-report-{{ run_id }}.log">
      <i data-lucide="download"></i> Download log
    </a>
    {% endif %}
  </div>
</div>

<div class="rl-callout fade-up{% if not run_errored %} rl-neutral{% endif %}">
  <span class="rl-ico"><i data-lucide="life-buoy"></i></span>
  <div class="rl-body">
    {% if run_errored %}Something went wrong with this report. Contact{% else %}Need help with this run? Contact{% endif %}
    <a href="mailto:support@finitestate.io?subject={{ ('fs-report run ' ~ run_id ~ ' log') | urlencode }}">support@finitestate.io</a>
    and include this run's id (<span class="mono">{{ run_id }}</span>) and the log below
    {% if log_found %}(use <strong>Download log</strong> to attach it){% endif %}.
  </div>
</div>

<div class="panel">
  <div class="phead">
    <h2>Log output</h2>
    <span class="pmeta">{{ run_id }}</span>
  </div>
  {% if log_found %}
  {% if log_truncated %}
  <p class="rl-trunc">Showing the last portion of the log (truncated) — use <strong>Download log</strong> for the full log.</p>
  {% endif %}
  <pre class="rl-log">{{ log_text }}</pre>
  {% else %}
  <div class="rl-empty">
    <span class="rl-empty-t">No log file found for this run.</span>
    <span class="rl-empty-s">The log may have been rotated or removed. Contact support@finitestate.io with the run id above.</span>
  </div>
  {% endif %}
</div>
{% endblock %}