{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/bots.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>Bot Monitor</h2>
    <span class="admin-count" id="bots-count">{{ frames|length }} bots</span>
</div>

{% if not enabled %}
<p class="admin-empty">The Bots service is not enabled. Enable it on <a href="/admin/services">Services</a> to see live screenshots.</p>
{% endif %}

<div class="bots-grid" id="bots-grid" data-endpoint="/admin/bots/data" role="region" aria-label="Live bot screenshots" aria-live="polite">
    {% for frame in frames %}
    <figure class="bot-card {% if frame['active'] %}bot-active{% else %}bot-idle{% endif %}" data-slot="{{ frame['slot'] }}">
        <span class="sr-only">{% if frame['active'] %}active{% else %}idle{% endif %}</span>
        <div class="bot-shot">
            {% if frame['has_image'] %}
            <img src="{{ frame['frame_url'] }}" alt="Screenshot of bot {{ frame['label'] }}" loading="lazy" data-lightbox>
            <span class="bot-shot-age" data-bot-age data-age-seconds="{{ frame['age_seconds'] }}"></span>
            {% else %}
            <div class="bot-shot-empty">no frame yet</div>
            {% endif %}
        </div>
        <figcaption class="bot-meta">
            <span class="bot-name">{{ frame['label'] }}</span>
            <span class="bot-persona">{{ frame['persona'] or '-' }}</span>
            <span class="bot-action">{{ frame['action'] or frame['status'] or 'idle' }}</span>
        </figcaption>
    </figure>
    {% else %}
    <p class="admin-empty" id="bots-empty">No bots running. Launch the fleet on <a href="/admin/services">Services</a>.</p>
    {% endfor %}
</div>
{% endblock %}
{% block extra_js %}
<script type="module">
import { BotMonitor } from "{{ static_url('/static/js/BotMonitor.js') }}";
const grid = document.getElementById("bots-grid");
const view = new BotMonitor(grid);
view.init();
window.app.botMonitor = view;
</script>
{% endblock %}