{# Tabbed view of the latest forge result. Each tab = one category file with
   copy + download + send-to-SubSift affordances. #}
<article x-data="{
            categories: {{ run.categories | tojson }},
            target: {{ run.target | tojson }},
            id: {{ (run.id or '') | tojson }},
            active: '{{ (run.categories|selectattr('count', 'gt', 0)|map(attribute='name')|first) or 'subdomains' }}',
            cat() { return this.categories.find(c => c.name === this.active) || {preview:[], count:0}; }
         }"
         class="panel-accent mt-1 p-6">
  <header class="flex flex-wrap items-baseline justify-between gap-3 border-b pb-4 hairline">
    <div>
      <p class="eyebrow">latest run</p>
      <h2 class="mt-1 mono text-lg" style="color: var(--ember-bright);">{{ run.target }}</h2>
      <p class="mt-1 text-xs" style="color: var(--text-faint);">
        <span class="mono">{{ run.provider }}/{{ run.model }}</span>
        · <span class="tnum">{{ run.collectors_run }}/4</span> collectors
        · <span class="tnum">{{ run.pages_fetched }}</span> pages
        · <span class="tnum">{{ run.duration_seconds }}s</span>
        {% if run.fallback_used %}· <span style="color: var(--warn);">fallback active</span>{% endif %}
        {% if run.id %}· <span class="mono" style="color: var(--text-faint);">{{ run.id[:8] }}</span>{% endif %}
      </p>
    </div>
    <span class="rounded-full px-3 py-1 text-sm font-medium"
          style="background: rgba(255,107,26,0.10); color: var(--ember-bright); border: 1px solid rgba(255,107,26,0.30);">
      <span class="tnum">{{ run.total_words }}</span> entries
    </span>
  </header>

  {# ----- Category tabs ----- #}
  <nav class="mt-4 flex flex-wrap gap-1 border-b pb-2 hairline">
    {% for cat in run.categories %}
      <button type="button"
              @click="active = '{{ cat.name }}'"
              :class="active === '{{ cat.name }}' ? 'tab tab-active' : 'tab'">
        {{ cat.name }}
        <span class="chip ml-1 tnum">{{ cat.count }}</span>
      </button>
    {% endfor %}
  </nav>

  {# ----- Active category content ----- #}
  <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[1fr_auto]">
    <div class="rounded-lg p-3" style="background: var(--bg); border: 1px solid var(--border);">
      <ul class="scroll-thin max-h-80 space-y-0.5 overflow-y-auto mono text-xs" style="color: var(--text-dim);">
        <template x-for="entry in cat().preview" :key="entry">
          <li class="truncate" x-text="entry"></li>
        </template>
        <template x-if="cat().count > cat().preview.length">
          <li class="pt-2 text-[11px]" style="color: var(--text-faint);" x-text="`+ ${cat().count - cat().preview.length} more — download for the full list`"></li>
        </template>
        <template x-if="cat().count === 0">
          <li style="color: var(--text-faint);">empty — the model produced no candidates here</li>
        </template>
      </ul>
    </div>

    {# ----- Actions ----- #}
    <div class="flex flex-col gap-2 lg:w-56">
      <button type="button"
              @click="copyToClipboard(cat().preview.join('\n'), '#toast-copy')"
              :disabled="cat().count === 0"
              class="btn btn-ghost justify-center disabled:opacity-40">
        <i data-lucide="clipboard-copy" class="h-3.5 w-3.5"></i> copy preview
      </button>

      <a :href="id ? `/api/generations/${id}/wordlist/${active}` : '#'"
         :class="(!id || cat().count === 0) ? 'pointer-events-none opacity-40' : ''"
         class="btn btn-ghost justify-center">
        <i data-lucide="download" class="h-3.5 w-3.5"></i> download .txt
      </a>

      <button type="button"
              @click="copyToClipboard(`wordforge generate ${target} --format ${active} | subsift scan --wordlist - ${target}`, '#toast-copy')"
              class="btn btn-ember-soft justify-center">
        <i data-lucide="arrow-right" class="h-3.5 w-3.5"></i> pipe to SubSift
      </button>

      <p class="mt-1 eyebrow leading-relaxed">
        full file + sha-256 at<br />/api/generations/{{ (run.id or '…')[:8] }}
      </p>
    </div>
  </div>

  {% if run.errors %}
    <details class="mt-4 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);">
      <summary class="cursor-pointer">{{ run.errors|length }} non-fatal issue(s) during the run</summary>
      <ul class="mt-2 space-y-1 mono text-[11px]" style="color: var(--warn);">
        {% for err in run.errors %}<li>· {{ err }}</li>{% endfor %}
      </ul>
    </details>
  {% endif %}

  <script>window.lucide?.createIcons();</script>
</article>

<div id="toast-copy"
     class="pointer-events-none fixed bottom-6 left-1/2 -translate-x-1/2 transform rounded-full px-4 py-1.5 text-xs font-medium opacity-0 shadow-xl transition-opacity"
     style="background: var(--ember-deep); color: #fff;">
  copied to clipboard
</div>