{{define "app_logs"}}
{{template "layout_start" .}}
<div class="app-page app-page-wide">
{{template "app_shell_start" .}}

{{/* „NAPLO" — today's logs page inside the shell. Its live poller runs ONLY on this tab, which is
     the reason the tabs are four URLs and not four hidden panels: a poller on the settings tab
     would ask the box for 200 log lines every three seconds for nothing. */}}

<div data-tab-panel="logs">
<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> {{T "logs.elo"}}
    </span>
    <button class="btn btn-outline btn-sm" id="logs-toggle" onclick="toggleLive()">{{T "logs.szuneteltetes"}}</button>
    <button class="btn btn-outline btn-sm" onclick="fetchLogs()">{{T "logs.frissites"}}</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 appSlug = '{{.Meta.Slug}}';

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

    window.fetchLogs = function() {
        fetch('/apps/' + appSlug + '/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> {{T "logs.elo"}}';
            toggleBtn.textContent = '{{T "logs.szuneteltetes"}}';
        } else {
            stopPolling();
            indicator.className = 'logs-live-indicator logs-live-paused';
            indicator.innerHTML = '{{T "logs.szunetelve"}}';
            toggleBtn.textContent = '{{T "logs.folytatas"}}';
        }
    };

    // Auto-scroll to bottom on initial load
    container.scrollTop = container.scrollHeight;
    startPolling();
})();
</script>
</div>

</div>{{/* .app-page */}}
{{template "layout_end" .}}
{{end}}