{% extends "layout.html" %}

{% block body_header_additional %}
    <script src="{{url_for('static', filename='js/libs/jquery-1.12.4.min.js')}}"></script>
{% endblock body_header_additional %}

{% block body_content %}
<audio id="clickSound" src="{{url_for('static', filename='click.mp3')}}"></audio>
<div class="container-auto">
    <div class="row">
        <div class="col justify-content-center text-center">
            <input type="text" id="sendKeysField" class="form-control"
                value="" placeholder="Send keys..." />
        </div>
    </div>
    <br/><br/>
    <div class="row">
        <div class="col justify-content-center text-center">
            <button id="sendKeysBtn" class="btn btn-success btn-lg">Send</button>
        </div>
    </div>
    <br/><br/>
    <div class="row">
        <div class="col justify-content-center text-center">
            <button id="scrollToggle" class="btn btn-success btn-lg">Scroll Mode: Inactive</button>
        </div>
        <div class="col justify-content-center text-center">
            <button id="mouseHoldToggle" class="btn btn-success btn-lg">Mouse Hold: Inactive</button>
        </div>
    </div>
</div>
<br/><br/>
<div class="row">
    <div id="rightClickBtn" class="col justify-content-center text-center btn btn-success">
        Right-Click
    </div>
</div>
<br/><br/>
<div class="container-auto">
    <div class="row">
        <div id="canvas" class="col justify-content-center text-center">
        </div>
    </div>
</div>
{% endblock body_content %}


{% block body_footer_additional %}
{% endblock body_footer_additional %}

{% block body_scripts_additional %}
    <script src="{{url_for('static', filename='js/libs/socket.io.js')}}"></script>
    <script src="{{url_for('static', filename='js/libs/jquery.mousedirection.js')}}"></script>
    <script src="{{url_for('static', filename='js/ajax.js')}}"></script>
    <script src="{{url_for('static', filename='js/events.js')}}"></script>
{% endblock body_scripts_additional %}
