{% 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: {{ format_date(svc.last_run, include_time=True) }}</span>
                {% endif %}
                {% if svc.next_run %}
                <span class="meta-item">Next run: {{ format_date(svc.next_run, include_time=True) }}</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" src="/static/js/ServiceMonitor.js"></script>
<script type="module">
const monitor = new window.ServiceMonitor();
monitor.start();
</script>
{% endblock %}