<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 &middot;
            {% 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> &mdash; {{ t.article_title | truncate(length=50) }}</span>
            <span class="badge badge-success">{{ t.stage }}</span>
        </div>
        {% if t.streamed_text %}
        {% set lines = t.streamed_text | split(pat="\n") %}{% set total = lines | length %}{% set start = total - 5 %}{% if start < 0 %}{% set start = 0 %}{% endif %}<div class="stream-text" style="margin-top:8px;font-size:13px;color:var(--mute);white-space:pre;overflow-x:hidden;overflow-y:hidden;height:120px;">{{ lines | slice(start=start, end=total) | join(sep="\n") }}</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> &mdash; {{ 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>
