{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="/static/css/services.css">
{% endblock %}
{% block admin_content %}
<div class="services-page">
    <h1>Services</h1>
    <div class="services-list" id="services-list">
        {% for svc in services %}
        <div class="service-card" data-service="{{ svc.name }}">
            <div class="service-header">
                <span class="service-name">{{ svc.name }}</span>
                <span class="service-status {{ svc.status }}">{{ svc.status }}</span>
            </div>
            <div class="service-meta">
                {% if svc.uptime %}
                <span class="meta-item">Uptime: {{ svc.uptime }}</span>
                {% endif %}
                {% if svc.last_run %}
                <span class="meta-item">Last run: {{ svc.last_run[:19] }}</span>
                {% endif %}
                {% if svc.next_run %}
                <span class="meta-item">Next run: {{ svc.next_run[:19] }}</span>
                {% endif %}
                <span class="meta-item">Interval: every {{ svc.interval_seconds }}s</span>
            </div>
            <div class="service-log">
                <div class="log-header">Log (last 20 lines)</div>
                <pre class="log-output">{% for line in svc.log_buffer %}{{ line }}
{% else %}No log entries yet.
{% endfor %}</pre>
            </div>
        </div>
        {% else %}
        <p class="no-services">No services registered.</p>
        {% endfor %}
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script type="module">
const POLL_INTERVAL = 5000;

async function pollServices() {
    try {
        const resp = await fetch('/admin/services/data');
        const data = await resp.json();
        const container = document.getElementById('services-list');
        if (!container) return;
        for (const svc of data.services) {
            const card = container.querySelector(`.service-card[data-service="${svc.name}"]`);
            if (!card) continue;
            card.querySelector('.service-status').textContent = svc.status;
            card.querySelector('.service-status').className = 'service-status ' + svc.status;
            const metaItems = card.querySelectorAll('.meta-item');
            if (metaItems.length >= 3) {
                metaItems[0].textContent = 'Uptime: ' + (svc.uptime || '-');
                metaItems[1].textContent = 'Last run: ' + (svc.last_run ? svc.last_run.slice(0, 19) : '-');
                metaItems[2].textContent = 'Next run: ' + (svc.next_run ? svc.next_run.slice(0, 19) : '-');
            }
            const logPre = card.querySelector('.log-output');
            if (logPre) {
                logPre.textContent = svc.log_buffer.map(l => l + '\n').join('') || 'No log entries yet.\n';
            }
        }
    } catch {
        // silently ignore poll errors
    }
}

setInterval(pollServices, POLL_INTERVAL);
</script>
{% endblock %}