<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sumorobot</title>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/cookieconsent.min.css">
    <!-- favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon_32x32.png">

    <script src="assets/js/cookie.js" type="text/javascript" charset="utf-8"></script>
    <!-- jquery, bootstrap -->
    <script src="assets/js/min/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/js/min/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- ace editor -->
    <script src="assets/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/js/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Google Blockly -->
    <script src="assets/blockly/blockly_compressed.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/blockly/blocks_compressed.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/blockly/python_compressed.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/blockly/msg/js/et.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/js/sumorobot.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/js/utils.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/js/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/js/blockly.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="battery"><img src="assets/img/battery_disconnected.png"></div>

    <div id="panel">
        <div id="central">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="robot-label">SumoID</span>
                </div>
                <input type="text" class="form-control" id="robot-id" placeholder="xxxxxxxx" />
            </div>
            <div class="btn-group btn-group-robot" role="group" aria-label="robots">
                <a href="#" class="btn btn-lg btn-robot-go">GO!</a>
            </div>
        </div>
    </div>

    <table class="blockly-table">
        <tr>
            <td id="leftCell">
                <div id="blocklyArea"></div>
                <div id="blocklyCode" style="display: none;"></div>
            </td>
            <td id="rightCell">
              <div id="stream"></div>
              <div id="readOnlyBlocklyCode"></div>
            </td>
        </tr>
    </table>

    <div id="blocklyDiv" style="position: absolute"></div>

    <xml id="toolbox" style="display: none">
        <block type="controls_if"></block>
        <block type="sumorobot_move"></block>
        <block type="sumorobot_sleep"></block>
        <block type="sumorobot_opponent"></block>
        <block type="sumorobot_line"></block>
        <block type="logic_operation"></block>
    </xml>

    <xml id="toolbox_no_if" style="display: none">
        <block type="controls_if" disabled="true"></block>
        <block type="sumorobot_move"></block>
        <block type="sumorobot_sleep"></block>
        <block type="sumorobot_opponent"></block>
        <block type="sumorobot_line"></block>
        <block type="logic_operation"></block>
    </xml>

    <div class="btn-group d-flex btn-group-control" role="group">
        <a href="#" class="btn btn-lg btn-success btn-start w-100">Start</a>
        <a href="#" class="btn btn-lg btn-danger btn-stop w-100">Stop</a>
        <a href="#" class="btn btn-lg btn-success btn-upload w-100">Upload</a>
    </div>
</body>
</html>