{% extends "base.html" %}
{% block content %}
<title>Script Controller</title>
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 2rem;
        max-width: 800px;
        margin: auto;
    }

    h1 {
        color: #333;
    }

    button {
        padding: 10px 20px;
        margin-right: 10px;
        font-size: 1rem;
    }

    pre {
        background: #f4f4f4;
        padding: 1rem;
        border: 1px solid #ccc;
        max-height: 300px;
        overflow-y: auto;
    }

    .status {
        font-weight: bold;
        margin-bottom: 1rem;
    }
</style>
</head>

<body>
    <h1>Script Net</h1>

    <div class="status">Status: <span id="status">Unknown</span></div>

    <button onclick="sendCommand('start')">Start</button>
    <button onclick="sendCommand('stop')">Stop</button>

    <h2>Log Output</h2>
    <pre id="log">Loading...</pre>

    <script>
        const statusEl = document.getElementById('status');
        const logEl = document.getElementById('log');

        async function sendCommand(command) {
            const res = await fetch(`/${command}`);
            const text = await res.text();
            statusEl.textContent = text;
            fetchLog();
        }

        async function fetchStatus() {
            try {
                const res = await fetch('/status');
                const text = await res.text();
                statusEl.textContent = text;
            } catch (err) {
                statusEl.textContent = 'Error';
            }
        }

        async function fetchLog() {
            try {
                const res = await fetch('/log');
                const text = await res.text();
                logEl.textContent = text;
            } catch (err) {
                logEl.textContent = 'Error fetching log...';
            }
        }

        // Poll every 3 seconds
        setInterval(() => {
            fetchStatus();
            fetchLog();
        }, 3000);

        // Load once immediately
        fetchStatus();
        fetchLog();
    </script>
</body>

{% endblock %}