{{define "logs"}}
{{template "layout_start" .}}
<div class="page-header">
    <a href="/stacks" class="btn btn-sm btn-outline">← Vissza</a>
    <h2>{{.Stack.Meta.DisplayName}} — Naplók</h2>
</div>
<div class="logs-container" id="logs-container">
    <pre class="logs-output" id="logs-output">{{.Logs}}</pre>
</div>
<div class="logs-actions">
    <span class="logs-live-indicator" id="live-indicator">
        <span class="logs-live-dot"></span> Élő
    </span>
    <button class="btn btn-outline btn-sm" id="logs-toggle" onclick="toggleLive()">Szüneteltetés</button>
    <button class="btn btn-outline btn-sm" onclick="fetchLogs()">Frissítés</button>
</div>
<script>
(function() {
    var container = document.getElementById('logs-container');
    var output = document.getElementById('logs-output');
    var indicator = document.getElementById('live-indicator');
    var toggleBtn = document.getElementById('logs-toggle');
    var live = true;
    var timer = null;
    var stackName = '{{.Stack.Name}}';

    function isAtBottom() {
        return container.scrollHeight - container.scrollTop - container.clientHeight < 50;
    }

    window.fetchLogs = function() {
        fetch('/stacks/' + stackName + '/logs?raw=1')
            .then(function(r) { return r.text(); })
            .then(function(text) {
                var wasAtBottom = isAtBottom();
                output.textContent = text;
                if (wasAtBottom) container.scrollTop = container.scrollHeight;
            })
            .catch(function() {});
    };

    function startPolling() {
        if (timer) return;
        timer = setInterval(window.fetchLogs, 3000);
    }

    function stopPolling() {
        if (timer) { clearInterval(timer); timer = null; }
    }

    window.toggleLive = function() {
        live = !live;
        if (live) {
            startPolling();
            indicator.className = 'logs-live-indicator';
            indicator.innerHTML = '<span class="logs-live-dot"></span> Élő';
            toggleBtn.textContent = 'Szüneteltetés';
        } else {
            stopPolling();
            indicator.className = 'logs-live-indicator logs-live-paused';
            indicator.innerHTML = '⏸ Szünetelve';
            toggleBtn.textContent = 'Folytatás';
        }
    };

    // Auto-scroll to bottom on initial load
    container.scrollTop = container.scrollHeight;
    startPolling();
})();
</script>
{{template "layout_end" .}}
{{end}}