<script type="text/javascript" src="{{ url_for('static', filename='js/gpio.zeroborg.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/gpio.zeroborg.css') }}"></script>

<div id="zb-container" class="row" tabindex="1">
    <div class="zb-controls-container">
        <div class="row">
            <div class="four columns">&nbsp;</div>
            <button data-direction="up" class="zb-ctrl-btn four columns">
                <i class="fa fa-sort-up"></i>
            </button>
            <div class="four columns">&nbsp;</div>
        </div>

        <div class="row">
            <button data-direction="left" class="zb-ctrl-btn four columns">
                <i class="fa fa-caret-left"></i>
            </button>
            <div class="four columns">&nbsp;</div>
            <button data-direction="right" class="zb-ctrl-btn four columns">
                <i class="fa fa-caret-right"></i>
            </button>
        </div>

        <div class="row">
            <div class="four columns">&nbsp;</div>
            <button data-direction="down" class="zb-ctrl-btn four columns">
                <i class="fa fa-sort-down"></i>
            </button>
            <div class="four columns">&nbsp;</div>
        </div>

        <div class="row ctrl-bottom-row">
            <div class="two columns">&nbsp;</div>
            <button data-action="auto" class="zb-ctrl-btn four columns">
                AUTO PILOT
            </button>
            <button data-action="stop" class="zb-ctrl-btn four columns">
                <i class="fa fa-stop"></i>
            </button>
            <div class="two columns">&nbsp;</div>
        </div>
    </div>
</div>

