{% extends "base.html" %}

{% block title %}Edit {{ service.name }}{% endblock %}

{% block content %}
<h2>Edit Service</h2>

<form id="edit-service-form" class="add-form">
    <input type="text" name="name" value="{{ service.name }}" placeholder="Service name" required>
    <input type="text" name="target" value="{{ service.target }}" placeholder="URL or host:port" required>
    <select name="protocol">
        <option value="https" {% if service.protocol == 'https' %}selected{% endif %}>HTTPS</option>
        <option value="http" {% if service.protocol == 'http' %}selected{% endif %}>HTTP</option>
        <option value="tcp" {% if service.protocol == 'tcp' %}selected{% endif %}>TCP</option>
    </select>
    <input type="number" name="interval_seconds" value="{{ service.interval_seconds }}" min="10" max="3600" title="Check interval (seconds)">
    <button type="submit">Save</button>
</form>

<p><a href="/">&larr; Back to Dashboard</a> | <a href="{{ url_for('report', service_id=service.id) }}">View Report</a></p>

<script>
document.getElementById('edit-service-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const payload = {
        name: form.name.value.trim(),
        target: form.target.value.trim(),
        protocol: form.protocol.value,
        interval_seconds: parseInt(form.interval_seconds.value, 10) || 60
    };
    const res = await fetch('/api/services/{{ service.id }}', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload)
    });
    if (res.ok) {
        window.location.href = '/';
    } else {
        const err = await res.json().catch(() => ({}));
        alert(err.error || 'Failed to update service');
    }
});
</script>
{% endblock %}