<div class="grid-2" style="margin-bottom:24px;">
{% for feed in feeds %}
<div class="card">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
<span class="status-dot" style="color: {% if feed.status == 'Fetching' or feed.status is starting_with('Translating') %}#0070f3{% elif feed.status == 'Done' %}#50e3c2{% elif feed.status == 'Error' %}#ee0000{% else %}#888888{% endif %};">●</span>
<strong><a href="/panel/feed/{{ feed.name }}/monitor" style="color:var(--ink);text-decoration:none;">{{ feed.name }}</a></strong>
</div>
<div style="font-size:13px;color:var(--mute);">
{{ feed.articles }} articles ·
{% if feed.status is starting_with('Translating') %}
Translating {{ feed.translating_completed }}/{{ feed.translating_total }} ({{ feed.translating_in_progress | length }} in progress)
{% elif feed.status == 'Fetching' %}
Fetching...
{% elif feed.last_fetch_at %}
Last fetch: {{ feed.last_fetch_at | truncate(length=19) }}
{% else %}
Idle
{% endif %}
</div>
</div>
{% endfor %}
</div>
<h2>Active Translations</h2>
{% if active | length > 0 %}
<div id="active-translations">
{% for t in active %}
<div class="card" style="margin-bottom:8px;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<span><strong>{{ t.feed_name }}</strong> — {{ t.article_title | truncate(length=50) }}</span>
<span class="badge badge-success">{{ t.stage }}</span>
</div>
{% if t.streamed_text %}
<div class="stream-text" style="margin-top:8px;font-size:13px;color:var(--mute);white-space:pre-wrap;">{{ t.streamed_text }}</div>
{% endif %}
</div>
{% endfor %}
</div>
{% else %}
<div id="active-translations">
<p style="color:var(--mute);">No active translations</p>
</div>
{% endif %}
<h2 style="margin-top:24px;">Recently Completed</h2>
<div id="recent-logs">
{% if recent_logs | length > 0 %}
{% for log in recent_logs %}
<div class="card" style="margin-bottom:8px;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<span><strong>{{ log.feed_name }}</strong> — {{ log.article_title | truncate(length=50) }}</span>
<span class="badge {% if log.status == 'Completed' %}badge-success{% else %}badge-error{% endif %}">{{ log.status }}</span>
</div>
<div style="font-size:12px;color:var(--mute);margin-top:4px;">{{ log.timestamp | truncate(length=19) }}</div>
</div>
{% endfor %}
{% if recent_count > 5 %}
<p style="color:var(--mute);font-size:12px;margin-top:8px;">... and {{ recent_count - 5 }} more</p>
{% endif %}
{% else %}
<p style="color:var(--mute);">No recent translations</p>
{% endif %}
</div>