{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/services.css') }}">
{% endblock %}
{% block admin_content %}
{% set svc = service %}
<div class="service-detail" data-service-detail data-service="{{ svc.name }}">
    <a class="service-back" href="/admin/services">&larr; All services</a>

    <div class="service-detail-head">
        <div class="service-detail-title">
            <h2>{{ svc.title }}</h2>
            <span class="service-status {{ svc.status }}">{{ svc.status }}</span>
        </div>
        {% if svc.description %}<p class="service-detail-desc">{{ svc.description }}</p>{% endif %}
        {% if svc.details %}
        <details class="service-detail-details" open>
            <summary>Grading algorithm</summary>
            <div class="service-detail-details-body">{{ svc.details }}</div>
        </details>
        {% endif %}
        <div class="service-controls">
            <button type="button" class="service-btn" data-action="start" data-service="{{ svc.name }}" aria-label="Start {{ svc.title }}" {% if svc.enabled %}disabled{% endif %}>Start</button>
            <button type="button" class="service-btn" data-action="stop" data-service="{{ svc.name }}" aria-label="Stop {{ svc.title }}" data-confirm="Stop the {{ svc.title }} service?" {% if not svc.enabled %}disabled{% endif %}>Stop</button>
            <button type="button" class="service-btn" data-action="run" data-service="{{ svc.name }}" aria-label="Run {{ svc.title }} now">Run now</button>
            <button type="button" class="service-btn" data-action="clear-logs" data-service="{{ svc.name }}" aria-label="Clear logs for {{ svc.title }}" data-confirm="Clear the log buffer for {{ svc.title }}?">Clear logs</button>
        </div>
    </div>

    <div class="svc-tabs" data-tabs>
        <div class="svc-tabbar" role="tablist">
            <button type="button" class="svc-tab" data-tab="overview">Overview</button>
            <button type="button" class="svc-tab" data-tab="config">Configuration</button>
            <button type="button" class="svc-tab" data-tab="logs">Logs</button>
        </div>

        <section class="svc-tabpane" data-tab-pane="overview">
            <div class="svc-meta-grid">
                <div class="svc-meta-item"><span class="svc-meta-label">Uptime</span><span class="svc-meta-value" data-meta="uptime">{{ svc.uptime or "-" }}</span></div>
                <div class="svc-meta-item"><span class="svc-meta-label">Last run</span><span class="svc-meta-value" data-meta="last_run">{% if svc.last_run %}{{ format_date(svc.last_run, include_time=True) }}{% else %}-{% endif %}</span></div>
                <div class="svc-meta-item"><span class="svc-meta-label">Next run</span><span class="svc-meta-value" data-meta="next_run">{% if svc.next_run %}{{ format_date(svc.next_run, include_time=True) }}{% else %}-{% endif %}</span></div>
                <div class="svc-meta-item"><span class="svc-meta-label">Heartbeat</span><span class="svc-meta-value" data-meta="heartbeat">{% if svc.heartbeat %}{{ format_date(svc.heartbeat, include_time=True) }}{% else %}-{% endif %}</span></div>
                <div class="svc-meta-item"><span class="svc-meta-label">Interval</span><span class="svc-meta-value" data-meta="interval">every {{ svc.interval_seconds }}s</span></div>
            </div>
            <div class="service-metrics" data-metrics role="status" aria-live="polite" aria-label="Service metrics"></div>
        </section>

        <section class="svc-tabpane" data-tab-pane="config">
            <form class="service-config" data-config-form data-service="{{ svc.name }}" autocomplete="off">
                {% for group in svc.field_groups %}
                <fieldset class="config-section">
                    <legend>{{ group.name }}</legend>
                    {% for field in group.fields %}
                    <div class="admin-field">
                        <label for="{{ svc.name }}_{{ field.key }}">{{ field.label }}</label>
                        {% if field.type == "bool" %}
                        <select id="{{ svc.name }}_{{ field.key }}" name="{{ field.key }}" class="admin-select service-field-input">
                            <option value="1" {% if field.value == "1" %}selected{% endif %}>Enabled</option>
                            <option value="0" {% if field.value != "1" %}selected{% endif %}>Disabled</option>
                        </select>
                        {% elif field.type == "select" %}
                        <select id="{{ svc.name }}_{{ field.key }}" name="{{ field.key }}" class="admin-select">
                            {% for opt in field.options %}
                            <option value="{{ opt.value }}" {% if field.value == opt.value %}selected{% endif %}>{{ opt.label }}</option>
                            {% endfor %}
                        </select>
                        {% elif field.type == "text" %}
                        <textarea id="{{ svc.name }}_{{ field.key }}" name="{{ field.key }}" rows="3">{{ field.value }}</textarea>
                        {% elif field.type == "password" %}
                        <input type="password" id="{{ svc.name }}_{{ field.key }}" name="{{ field.key }}" value="" autocomplete="new-password" data-lpignore="true" data-1p-ignore data-form-type="other" placeholder="{% if field.is_set %}Set - leave blank to keep current{% else %}Not set{% endif %}">
                        {% elif field.type == "int" %}
                        <input type="number" id="{{ svc.name }}_{{ field.key }}" name="{{ field.key }}" value="{{ field.value }}"{% if field.minimum is not none %} min="{{ field.minimum }}"{% endif %}{% if field.maximum is not none %} max="{{ field.maximum }}"{% endif %} class="service-field-input">
                        {% elif field.type == "float" %}
                        <input type="number" step="any" id="{{ svc.name }}_{{ field.key }}" name="{{ field.key }}" value="{{ field.value }}"{% if field.minimum is not none %} min="{{ field.minimum }}"{% endif %}{% if field.maximum is not none %} max="{{ field.maximum }}"{% endif %} class="service-field-input">
                        {% elif field.type == "url" %}
                        <input type="url" id="{{ svc.name }}_{{ field.key }}" name="{{ field.key }}" value="{{ field.value }}">
                        {% else %}
                        <input type="text" id="{{ svc.name }}_{{ field.key }}" name="{{ field.key }}" value="{{ field.value }}">
                        {% endif %}
                        {% if field.help %}<small class="hint-text">{{ field.help }}</small>{% endif %}
                        <small class="field-error" data-error="{{ field.key }}" role="alert" aria-live="assertive"></small>
                    </div>
                    {% endfor %}
                </fieldset>
                {% endfor %}
                <div class="config-actions">
                    <button type="submit" class="btn btn-primary">Save configuration</button>
                    <span class="config-status" data-config-status role="status" aria-live="polite"></span>
                </div>
            </form>
        </section>

        <section class="svc-tabpane" data-tab-pane="logs">
            <div class="service-log">
                <div class="log-header" id="service-log-header">Log</div>
                <pre class="log-output" role="region" aria-labelledby="service-log-header">{% for line in svc.log_buffer %}{{ line }}
{% else %}No log entries yet.
{% endfor %}</pre>
            </div>
            <div class="service-log">
                <div class="log-header" id="service-live-log-header">Live output</div>
                <pre class="log-output" data-live-log role="log" aria-live="polite" aria-labelledby="service-live-log-header">No live output yet.</pre>
            </div>
        </section>
    </div>
</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 %}