<!doctype html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} - CMDRConsole</title>

<link href="{{ url_for('static', filename='bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='CMDRConsole.css') }}" rel="stylesheet">

<section class="content">
    <div class="container-fluid">
        <div class="row header-row">
            <div class="col-xs-12 button-col">
                {% block displayName %}{% endblock %}
            </div>
        </div>
        {% block buttons %}{% endblock %}
    </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    addEventListener("DOMContentLoaded", function() {
        var buttons = document.querySelectorAll("button");
        for (var ii=0, ll=buttons.length; ii<ll; ii++) {
            var btn = buttons[ii];
            btn.addEventListener("click", function(e) {
                e.preventDefault();
                
                var clickedButton = e.target;
                var command = clickedButton.value;
                
                var request = new XMLHttpRequest();
                request.open("POST", "/button_press", true);
                request.send(command);
            });
        }
    }, true);
</script>

