<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ info.title }} — Task Showcase</title>
  <style>
    :root {
      --bg: #f3f5f8;
      --panel: #ffffff;
      --panel-2: #f9fafb;
      --text: #0f172a;
      --muted: #64748b;
      --line: #e5e7eb;
      --accent: #0e7490;
      --good: #047857;
      --good-bg: #ecfdf5;
      --warn: #b45309;
      --warn-bg: #fef3c7;
      --bad: #b91c1c;
      --bad-bg: #fef2f2;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   Helvetica, Arial, sans-serif;
      background: var(--bg); color: var(--text); line-height: 1.5;
    }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    main { max-width: 1080px; margin: 0 auto; padding: 28px 28px 64px; }

    .back-link { font-size: 12px; color: var(--accent); display: inline-block; margin-bottom: 4px; }
    .page-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 24px; flex-wrap: wrap; margin-bottom: 18px;
    }
    .page-head .left { min-width: 0; flex: 1; }
    .eyebrow { color: var(--accent); font-size: 11.5px; font-weight: 700;
               letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
    .page-head h1 { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.15; }
    .updated { color: var(--muted); font-size: 13px; padding-top: 14px; white-space: nowrap; }

    .banner {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 8px; padding: 14px 18px; display: flex; align-items: center;
      gap: 12px; margin-bottom: 24px;
    }
    .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--good); }
    .banner .title { font-weight: 600; font-size: 14px; }
    .banner .sub   { color: var(--muted); font-size: 13px; }

    h2.section-title {
      font-size: 13px; font-weight: 700; color: var(--text);
      letter-spacing: .04em; margin: 26px 0 10px;
    }

    /* sources */
    .sources {
      display: grid; gap: 12px;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .src {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 8px; padding: 12px 14px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .src .name { font-weight: 600; font-size: 13px; line-height: 1.3; }
    .src .note { color: var(--muted); font-size: 12px; }
    .pill {
      display: inline-block; padding: 2px 10px; border-radius: 4px;
      font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
      background: var(--good-bg); color: var(--good); width: fit-content;
    }
    .src .link { font-size: 12px; word-break: break-all; }

    /* report sections */
    .report { display: flex; flex-direction: column; gap: 18px; }
    .panel {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 8px; padding: 16px 18px;
    }
    .panel h3 {
      margin: 0 0 12px; font-size: 13px; font-weight: 700;
      color: var(--text); letter-spacing: .02em;
    }
    .panel.summary { border-left: 3px solid var(--good); background: var(--good-bg); border-color: #a7f3d0; }
    .panel.summary h3 { color: var(--good); }
    .panel.summary p  { margin: 0; color: #064e3b; font-size: 14px; line-height: 1.55; }

    /* table */
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th, td {
      text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
      vertical-align: top;
    }
    th { color: var(--muted); font-weight: 600; font-size: 11px;
         text-transform: uppercase; letter-spacing: .04em; background: var(--panel-2); }
    tr:last-child td { border-bottom: none; }
    .panel.has-table { padding: 16px 0 4px; }
    .panel.has-table h3 { padding: 0 18px; }
    .panel.has-table table { padding: 0 18px; }
    .panel.has-table th:first-child, .panel.has-table td:first-child { padding-left: 18px; }
    .panel.has-table th:last-child,  .panel.has-table td:last-child  { padding-right: 18px; }

    /* list */
    .panel ul.bullets { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: #1e293b; }
    .panel ul.bullets li { margin-bottom: 4px; }

    /* kv */
    .kv { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 6px 16px; font-size: 13.5px; }
    .kv dt { color: var(--muted); font-weight: 600; }
    .kv dd { margin: 0; color: #1e293b; }

    /* cards section (for listings) */
    .mini-cards { display: grid; gap: 10px;
                  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .mini-card {
      border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
      background: var(--panel-2); display: flex; flex-direction: column; gap: 4px;
    }
    .mini-card .t { font-weight: 600; font-size: 13px; }
    .mini-card .st { color: var(--muted); font-size: 12px; }
    .mini-card .f { font-size: 12px; color: #334155; }
    .mini-card .f .k { color: var(--accent); font-weight: 600; margin-right: 4px; }
    .mini-card a { font-size: 12px; }

    /* task description */
    .desc { background: var(--panel); border: 1px solid var(--line);
            border-radius: 8px; padding: 16px 18px; font-size: 14px; }
    .desc .meta-line { color: var(--muted); font-size: 12px; margin-bottom: 10px;
                       display: flex; gap: 16px; flex-wrap: wrap; }
    .desc .meta-line .k { color: var(--accent); font-weight: 600; margin-right: 4px; }
    .desc .body { color: #334155; line-height: 1.6; white-space: pre-wrap; }

    details > summary { cursor: pointer; color: var(--accent); font-size: 12px;
                        list-style: none; }
    details > summary::-webkit-details-marker { display: none; }
    details[open] > summary::after { content: " ▾"; }
    details:not([open]) > summary::after { content: " ▸"; }
  </style>
</head>
<body>
  <main>
    <a class="back-link" href="{{ url_for('index') }}">← All tasks</a>
    <div class="page-head">
      <div class="left">
        <div class="eyebrow">{{ info.theme }} · {{ info.cadence or 'on demand' }}</div>
        <h1>{{ info.title }}</h1>
      </div>
      <div class="updated">Updated {{ updated }}</div>
    </div>

    <!-- status banner -->
    <div class="banner">
      <span class="dot"></span>
      <div>
        <div class="title">
          {% if result.headline %}{{ result.headline }}{% else %}Run completed{% endif %}
        </div>
        <div class="sub">Refreshed in {{ num_steps }} agent steps · {{ sources|length }} source{{ '' if sources|length == 1 else 's' }} consulted</div>
      </div>
    </div>

    <!-- sources -->
    {% if sources %}
    <h2 class="section-title">Sources</h2>
    <div class="sources">
      {% for s in sources %}
        <div class="src">
          <div class="name">{{ s.name }}</div>
          {% if s.note %}<div class="note">{{ s.note }}</div>{% endif %}
          <span class="pill">OK</span>
          <a class="link" href="{{ s.url }}" target="_blank" rel="noopener">Open ↗</a>
        </div>
      {% endfor %}
    </div>
    {% endif %}

    <!-- structured report -->
    {% if result.sections %}
    <h2 class="section-title">Result</h2>
    <div class="report">
      {% for sec in result.sections %}
        {% if sec.type == 'summary' %}
          <div class="panel summary">
            <h3>{{ sec.title }}</h3>
            <p>{{ sec.body }}</p>
          </div>
        {% elif sec.type == 'table' %}
          <div class="panel has-table">
            <h3>{{ sec.title }}</h3>
            <table>
              <thead>
                <tr>{% for c in sec.columns %}<th>{{ c }}</th>{% endfor %}</tr>
              </thead>
              <tbody>
                {% for row in sec.rows %}
                  <tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% elif sec.type == 'list' %}
          <div class="panel">
            <h3>{{ sec.title }}</h3>
            <ul class="bullets">
              {% for item in sec['entries'] %}<li>{{ item }}</li>{% endfor %}
            </ul>
          </div>
        {% elif sec.type == 'kv' %}
          <div class="panel">
            <h3>{{ sec.title }}</h3>
            <dl class="kv">
              {% for k, v in sec['entries'] %}
                <dt>{{ k }}</dt><dd>{{ v }}</dd>
              {% endfor %}
            </dl>
          </div>
        {% elif sec.type == 'cards' %}
          <div class="panel">
            <h3>{{ sec.title }}</h3>
            <div class="mini-cards">
              {% for c in sec['entries'] %}
                <div class="mini-card">
                  <div class="t">{{ c.title }}</div>
                  {% if c.subtitle %}<div class="st">{{ c.subtitle }}</div>{% endif %}
                  {% for k, v in c.fields or [] %}
                    <div class="f"><span class="k">{{ k }}</span>{{ v }}</div>
                  {% endfor %}
                  {% if c.url %}<a href="{{ c.url }}" target="_blank" rel="noopener">Open ↗</a>{% endif %}
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
    {% endif %}

    <!-- raw final response (collapsed for verification) -->
    {% if final_response %}
    <h2 class="section-title">Raw agent output</h2>
    <div class="panel">
      <details>
        <summary>Show raw final response</summary>
        <p style="margin: 10px 0 0; font-size: 13px; color: #334155; white-space: pre-wrap;">{{ final_response }}</p>
      </details>
    </div>
    {% endif %}

    <!-- task description (background) -->
    <h2 class="section-title">Task</h2>
    <div class="desc">
      <div class="meta-line">
        <span><span class="k">level</span>{{ info.level }}</span>
        <span><span class="k">site</span><a href="{{ info.website }}" target="_blank" rel="noopener">{{ info.website }}</a></span>
        <span><span class="k">task_id</span>{{ info.task_id }}</span>
      </div>
      <div class="body">{{ info.task_prompt }}</div>
    </div>
  </main>
</body>
</html>
