{% extends "base.html" %}
{% block content %}
<section class="section">
    <nav class="breadcrumb"><ul><li><a href="/compose">Compose</a></li><li class="is-active"><a href="#">{{ service }}</a></li></ul></nav>
    <h1 class="title">{{ service }}</h1>
    <div class="buttons">
        <button class="button is-success" onclick="runAction('up')">Up</button>
        <button class="button is-danger" onclick="runAction('down')">Down</button>
        <button class="button is-warning" onclick="runAction('restart')">Restart</button>
        <button class="button is-info" onclick="runAction('logs')">Logs</button>
    </div>
    <pre id="output" class="log-box"></pre>
</section>
<script>
function runAction(action) {
    const el = document.getElementById('output');
    el.textContent = '';
    const evt = new EventSource(`/compose/{{ service }}/stream/${action}`);
    evt.addEventListener('stdout', e => { el.textContent += e.data + '\n'; });
    evt.addEventListener('stderr', e => { el.textContent += e.data + '\n'; });
    evt.addEventListener('exit', e => { evt.close(); });
    evt.addEventListener('error', e => { el.textContent += '\nERROR: ' + e.data + '\n'; });
}
</script>
{% endblock %}