{% extends "base.html" %}
{% set active_nav = "topics" %}

{% block title %}Topics - Distill{% endblock %}

{% block content %}
<h1>Topics</h1>
<p class="subtitle">{{ topics|length }} topics in your library</p>

<div class="topic-grid">
  {% for t in topics %}
  <a href="/topics/{{ t.name }}" style="text-decoration:none;color:inherit;">
    <div class="card topic-card">
      <div class="name">{{ t.name }}</div>
      <div class="stats">
        {{ t.channel_count }} channels &middot; {{ t.video_count }} videos<br>
        {% if t.site_count %}{{ t.site_count }} sites &middot; {% endif %}
        {% if t.paper_count %}{{ t.paper_count }} papers &middot; {% endif %}
        {% if t.has_synthesis %}<span class="badge badge-green">synthesis</span> {% endif %}
        {% if t.has_report %}<span class="badge badge-green">report</span> {% endif %}
        {% if t.has_brief %}<span class="badge badge-green">brief</span> {% endif %}
      </div>
    </div>
  </a>
  {% else %}
  <section class="card empty-state" aria-labelledby="empty-topics-title">
    <p class="eyebrow">Start here</p>
    <h2 id="empty-topics-title">No topics yet</h2>
    <p>Set up Distill, then preview a source before ingesting into a topic.</p>
    <ol>
      <li><code>distill --cost-mode no-metered init</code></li>
      <li><code>distill --cost-mode no-metered doctor</code></li>
      <li><code>distill --cost-mode no-metered papers "topic" -n 5 --preview</code></li>
      <li><code>distill --cost-mode no-metered latest "topic" -n 5 --preview</code></li>
    </ol>
    <p class="empty-state-note">These commands refuse API-billed routes. Use <code>paid-ok</code> only when you intend cloud model work.</p>
  </section>
  {% endfor %}
</div>
{% endblock %}