{% extends 'base.html' %}
{% block content %}

<div class="card">
  		<div class="card-header">
   			Running playbook 
  		</div>
  		<div class="card-body">
		Command to run : <code>ansible-playbook {{ playbook }} {{ argument }}</code>
		</div>
</div>
<div class="card">
                <div class="card-header">
                        Output
                </div>
                <div class="card-body">
		Test
	</div>
</div>


<pre id="output"></pre>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);

        socket.on('output', function(data) {
            document.getElementById('output').textContent += data.data;
        });
        function executeCommand() {
            socket.emit('execute_command', "ansible-playbook {{ playbook }} {{ argument }}");
        }
    </script>

{% endblock %}