{% 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 id="leftClickBtn" class="col justify-content-center text-center btn btn-success">
            Left-Click
        </div>
        <div id="rightClickBtn" class="col justify-content-center text-center btn btn-success">
            Right-Click
        </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 class="col justify-content-center text-center">
        <input type="text" id="sendKeysField" class="form-control" style="font-size: 145%;" value="" placeholder="Send keys...">
    </div>
    <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="container-auto">
    <div class="row">
        <div class="col justify-content-center text-center">
            <div id="cordsText" style="font-size: 280%;">
                X coords: 0, Y coords: 0
            </div>

            <canvas id="canvas"></canvas>
        </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 %}