<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sumorobot</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="shortcut icon" type="image/png" href="logo.png"/>
    <script src="jquery.min.js"></script>
    <script src="blockly_compressed.js"></script>
    <script src="sumorobot_compressed.js"></script>
    <script src="blocks_compressed.js"></script>
    <script src="msg/js/en.js"></script>
    <script src="sumorobot.js"></script>
</head>
<body>
    <div id="bar">Disconnected<span id="battery"></span></div>
    <div id="stream">
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-lg btn-danger btn-close">Close</a>
        </div>
    </div>
    <div id="panel">
        <object type="image/svg+xml" data="logo.svg">
  	       RoboKoding logo
        </object>
        <div class="input-group">
            <span class="input-group-addon robot-nr">1</span>
            <input type="text" class="form-control robot-id" placeholder="ID" />
            <span class="input-group-addon addon-no-border robot-nr">2</span>
            <input type="text" class="form-control robot-id" placeholder="ID" />
            <span class="input-group-addon addon-no-border robot-nr">3</span>
            <input type="text" class="form-control robot-id" placeholder="ID" />
            <span class="input-group-addon addon-no-border robot-nr">4</span>
            <input type="text" class="form-control robot-id" placeholder="ID" />
            <span class="input-group-addon addon-no-border robot-nr">5</span>
            <input type="text" class="form-control robot-id" placeholder="ID" />
        </div>
        <div class="btn-group btn-group-justified btn-group-robot" role="group" aria-label="robots">
            <a href="#" class="btn btn-lg btn-robot-nr">1</a>
            <a href="#" class="btn btn-lg btn-robot-nr">2</a>
            <a href="#" class="btn btn-lg btn-robot-nr">3</a>
            <a href="#" class="btn btn-lg btn-robot-nr">4</a>
            <a href="#" class="btn btn-lg btn-robot-nr">5</a>
            <a href="#" class="btn btn-lg btn-robot-add">+</a>
        </div>
        <div>
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input big-checkbox" id="remote-control">
                Remote control
            </label>
        </div>
    </div>

    <table>
        <tr>
            <td id="blocklyArea"></td>
            <td id="blocklyCodeArea"><textarea id="blocklyCode" readonly></textarea></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_delay"></block>
        <block type="sumorobot_enemy"></block>
        <block type="sumorobot_line"></block>
    </xml>

    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-lg btn-success btn-start">Start</a>
        <a href="#" class="btn btn-lg btn-danger btn-stop">Stop</a>
    </div>
</body>
</html>