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

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

{% block content %}
<h1>Watchlist</h1>
<p class="subtitle">{{ channel_watches|length }} channel watches &middot; {{ topic_watches|length }} topic watches</p>

{% if stale %}
<div style="margin-bottom:20px;">
  {% for msg in stale %}
  <div class="attention-item">{{ msg }}</div>
  {% endfor %}
</div>
{% endif %}

{% if not channel_watches and not topic_watches %}
<section class="card empty-state" aria-labelledby="empty-watchlist-title">
  <p class="eyebrow">Stay current</p>
  <h2 id="empty-watchlist-title">No watches configured</h2>
  <p>Watches are recurring sources. Configure them after you have a topic, then run catch-up or topic-watch on a cadence you control.</p>
  <ol>
    <li><code>distill monitor "your topic query" --topic my-topic --preview</code></li>
    <li><code>distill topic-watch add "your topic query" --topic my-topic</code></li>
    <li><code>distill watch add &lt;channel-url&gt; --topic my-topic</code></li>
    <li><code>distill topic-watch run</code> or <code>distill catch-up</code> when you want a refresh</li>
  </ol>
  <p class="empty-state-note">Distill does not schedule runs itself. External loops, cron, or a human operator choose when to run watches.</p>
</section>
{% else %}
<div class="grid-2">
  <div class="card">
    <h2>Channel Watches</h2>
    <table>
      <caption class="sr-only">Channel watches</caption>
      <thead><tr><th scope="col">Channel</th><th scope="col">Topic</th><th scope="col">Lookback</th></tr></thead>
      <tbody>
        {% for w in channel_watches %}
        <tr>
          <td><a href="/topics/{{ w.topic }}/channels/{{ w.name }}">{{ w.name }}</a></td>
          <td><a href="/topics/{{ w.topic }}">{{ w.topic }}</a></td>
          <td>{{ w.days }}d</td>
        </tr>
        {% else %}
        <tr><td colspan="3" style="color:var(--muted)">No channel watches configured</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card">
    <h2>Topic Watches</h2>
    <table>
      <caption class="sr-only">Topic watches</caption>
      <thead><tr><th scope="col">Name</th><th scope="col">Cadence</th><th scope="col">Picks</th><th scope="col">Budget</th><th scope="col">Status</th></tr></thead>
      <tbody>
        {% for tw in topic_watches %}
        {% set e = tw.entry %}
        <tr>
          <td>
            {{ e.name }}
            <div style="color:var(--muted);font-size:0.82rem;">{{ e.topic }} / {{ e.days }}d</div>
          </td>
          <td>{{ e.cadence }}</td>
          <td>{{ e.limit }}</td>
          <td>
            ~${{ "%.2f"|format(tw.projected_cost) }}/run
            {% if e.monthly_budget %}<br><span style="color:var(--muted)">${{ "%.2f"|format(e.monthly_budget) }}/mo</span>{% endif %}
          </td>
          <td>
            {% if e.paused %}
              <span class="badge badge-amber">paused</span>
            {% else %}
              <span class="badge badge-green">active</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="5" style="color:var(--muted)">No topic watches configured</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endblock %}