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

<div class="admin-table-wrap">
    <table class="admin-table services-index" id="services-list">
        <caption class="sr-only">Background services</caption>
        <thead>
            <tr>
                <th scope="col">Service</th>
                <th scope="col">Status</th>
                <th scope="col">Uptime</th>
                <th scope="col">Last run</th>
                <th scope="col">Next run</th>
                <th scope="col">Interval</th>
                <th scope="col"><span class="sr-only">Actions</span></th>
            </tr>
        </thead>
        <tbody>
            {% for svc in services %}
            <tr class="service-row" data-service="{{ svc.name }}">
                <td>
                    <a class="service-row-name" href="/admin/services/{{ svc.name }}">{{ svc.title }}</a>
                    {% if svc.description %}<div class="service-row-desc">{{ svc.description }}</div>{% endif %}
                </td>
                <td><span class="service-status {{ svc.status }}">{{ svc.status }}</span></td>
                <td data-meta="uptime">{{ svc.uptime or "-" }}</td>
                <td data-meta="last_run">{% if svc.last_run %}{{ format_date(svc.last_run, include_time=True) }}{% else %}-{% endif %}</td>
                <td data-meta="next_run">{% if svc.next_run %}{{ format_date(svc.next_run, include_time=True) }}{% else %}-{% endif %}</td>
                <td data-meta="interval">every {{ svc.interval_seconds }}s</td>
                <td><a class="admin-btn admin-btn-sm" href="/admin/services/{{ svc.name }}">Manage &rarr;</a></td>
            </tr>
            {% else %}
            <tr><td colspan="7" class="admin-empty">No services registered.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}
{% block extra_js %}
<script type="module" src="{{ static_url('/static/js/ServiceMonitor.js') }}"></script>
<script type="module">
new window.ServiceMonitor().start();
</script>
{% endblock %}