{% extends 'base.html' %}
{% block content %}
<div class="card">
  		<div class="card-header">
    			Select Playbook and arguments
  		</div>
  		<div class="card-body">
			<form id="ansibleForm">
                                <label for="os">Playbook</label>
                                        <select id="playbook" class="form-control" name="playbook" placeholder="Profile" required>
                                        {%for file in list %}
                                                <option value={{ file }}>{{ file }}</option>
                                        {%endfor%}
                                        </select><br>
				<label for="nom">Arguments</label>
					<input type="text" name="arguments" class="form-control" placeholder="-e "><br>
                                <label for="nom">Hosts</label>
                                        <input type="text" name="arguments" class="form-control" placeholder="/path/to/inventory"><br>
				<button type="submit" class="btn btn-primary"onclick="submitForm()">Executer</button>
			</form>
		</div>
	</div>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);

        function submitForm() {
            var playbook = document.forms["ansibleForm"]["playbook"].value;
            var hosts = document.forms["ansibleForm"]["hosts"].value;
            var arguments = document.forms["ansibleForm"]["arguments"].value;

            socket.emit('submit_playbook', { playbook: playbook, hosts: hosts });
            window.location.href = "/run";
        }
    </script>

{% endblock %}