{# The run form's answer: the run just started, streaming its output in place. #}
{% from "_macros.html" import status_badge %}
<div class="card run-started">
    <div class="run-started-head">
        {{ status_badge('running') }}
        <span>{{ title }}</span>
        <a href="/ansible/runs/{{ run.id }}" class="run-started-link">Full view →</a>
    </div>
    <pre id="sse-output-{{ run.id }}" class="run-output"></pre>
    <div id="sse-status-{{ run.id }}" class="field-hint">
        Streaming output…
    </div>
    <script>
    (function() {
        var es = new EventSource('/ansible/runs/{{ run.id }}/stream');
        var pre = document.getElementById('sse-output-{{ run.id }}');
        var status = document.getElementById('sse-status-{{ run.id }}');
        es.addEventListener('output', function(e) {
            pre.textContent += e.data + '\n';
            pre.scrollTop = pre.scrollHeight;
        });
        es.addEventListener('done', function(e) {
            es.close();
            status.textContent = 'Finished: ' + e.data;
        });
    })();
    </script>
</div>