{# Slide-over drawer rendered by the recent-runs table (target #run-detail-drawer). #}
<div class="flex h-full flex-col">
  <header class="sticky top-0 flex items-center justify-between border-b px-6 py-4 hairline"
          style="background: rgba(10,10,14,0.97);">
    <div>
      <p class="eyebrow">run detail</p>
      <h2 class="mono text-lg" style="color: var(--ember-bright);">{{ run.target }}</h2>
      <p class="mt-0.5 mono text-[11px]" style="color: var(--text-faint);">{{ run.id }}</p>
    </div>
    <button onclick="closeDrawer()" class="btn btn-ghost px-2 py-2"><i data-lucide="x" class="h-4 w-4"></i></button>
  </header>

  <div class="space-y-4 overflow-y-auto px-6 py-5">
    <div class="grid grid-cols-2 gap-3 text-sm sm:grid-cols-4">
      <div class="panel p-3"><p class="eyebrow">provider</p><p class="mt-1 mono" style="color: var(--text);">{{ run.provider }}</p><p class="mono text-[11px]" style="color: var(--text-faint);">{{ run.model }}</p></div>
      <div class="panel p-3"><p class="eyebrow">status</p><p class="mt-1 mono" style="color: var(--text);">{{ run.status }}</p></div>
      <div class="panel p-3"><p class="eyebrow">words</p><p class="mt-1 mono tnum" style="color: var(--ember-bright);">{{ run.total_words }}</p></div>
      <div class="panel p-3"><p class="eyebrow">duration</p><p class="mt-1 mono tnum" style="color: var(--text);">{% if run.duration_s is not none %}{{ "%.2f"|format(run.duration_s) }}s{% else %}—{% endif %}</p></div>
    </div>

    <section>
      <h3 class="mb-2 eyebrow">categories</h3>
      <div class="space-y-2">
        {% for c in run.categories %}
          <div class="flex items-center justify-between panel px-4 py-3">
            <div class="min-w-0">
              <p class="mono text-sm uppercase" style="color: var(--text);">{{ c.name }}</p>
              <p class="mt-1 mono text-[10px]" style="color: var(--text-faint);">
                {{ c.entry_count }} entries · {{ (c.bytes_size / 1024) | round(1) }} KiB
                {% if c.sha256 %}· <span title="{{ c.sha256 }}">sha256:{{ c.sha256[:10] }}…</span>{% endif %}
              </p>
            </div>
            {% if c.has_file %}
              <a href="/api/generations/{{ run.id }}/wordlist/{{ c.name }}" class="btn btn-ghost">
                <i data-lucide="download" class="h-3 w-3"></i><span>download</span>
              </a>
            {% else %}
              <span class="eyebrow">no file</span>
            {% endif %}
          </div>
        {% else %}
          <p class="text-sm" style="color: var(--text-dim);">This run produced no categorized output.</p>
        {% endfor %}
      </div>
    </section>

    {% if run.error_message %}
      <section class="rounded-lg p-3 text-xs" style="background: rgba(245,165,36,0.06); border: 1px solid rgba(245,165,36,0.25); color: var(--warn);">
        <p class="font-medium">Recorded issues</p>
        <p class="mt-1 mono">{{ run.error_message }}</p>
      </section>
    {% endif %}

    <section class="panel p-3">
      <p class="eyebrow">pipe-ready commands</p>
      <pre class="mt-2 overflow-x-auto mono text-[11px]" style="color: var(--text-dim);"><span style="color: var(--text-faint);"># subdomains → SubSift</span>
wordforge generate {{ run.target }} --format subdomains \
  | subsift scan --wordlist - {{ run.target }}

<span style="color: var(--text-faint);"># usernames → spray-attack tooling</span>
wordforge generate {{ run.target }} --format usernames</pre>
    </section>
  </div>
  <script>window.lucide?.createIcons();</script>
</div>