<commit_before>{% extends 'game/basenonav.html' %}

{% load static %}
{% load compress %}
{% load i18n %}

{% block scripts %}
{{block.super}}
  <script>
    var ANONYMOUS = '{{level.anonymous}}' === 'True';
    var PATH = {{level.path|safe}};
    var ORIGIN = {{level.origin|safe}};
    var DESTINATIONS = {{level.destinations|safe}};
    var DECOR = {{decor|safe}};
    var BACKGROUND_URL = "{{background}}";
    var HOUSE_URL = "{{house}}";
    var CFC_URL = "{{cfc}}";
    var TRAFFIC_LIGHTS = {{level.traffic_lights|safe}};
    var LEVEL_ID = "{{level.id}}" !== "None" ? "{{level.id}}" : "";
    var LEVEL_NAME = "{{level.name}}";
    var MODEL_SOLUTION = {{level.model_solution}};
    var DISABLE_ROUTE_SCORE = "{{level.disable_route_score}}" === "True";
    var LESSON = "{{lesson}}";
    var HINT = "{{hint}}";
    var DEFAULT_LEVEL = "{{level.default}}" === "True";
    var FUEL_GAUGE = "{{level.fuel_gauge}}" === "True";
    var CHARACTER_NAME = "{{character.name}}";
    var CHARACTER_URL = "{{character.top_down}}";
    var CHARACTER_EN_FACE_URL = "{{character.en_face}}"
    var CHAR_WIDTH = {{character.width}};
    var CHAR_HEIGHT = {{character.height}};
    var RANDOM = "{{episode.random_levels_enabled}}" === "True";

    var BLOCKS =  [];
    {% for block in blocks %}
      BLOCKS.push({'type':"{{block.type}}"{% if block.number %}, 'number':{{block.number}} {% endif %}});
    {% endfor %}

    var BLOCKLY_XML = '<xml id="blockly_toolbox" style="display: none"><category name="+">';
    for (var i = 0; i < BLOCKS.length; i++) {
        BLOCKLY_XML += '<block type="' + BLOCKS[i].type + '"></block>';
    }

    BLOCKLY_XML += '</category></xml>';
    var MAX_FUEL = {{level.max_fuel}};
    var DIRECT_DRIVE = "{{level.direct_drive}}" === "True";
    var NEXT_LEVEL = "{{level.next_level}}" !== "None" ? "{{level.next_level.name}}" : null;
    var NEXT_EPISODE = "{{level.episode.next_episode}}" !== "None" ? "{{level.episode.next_episode.id}}" : null;
    var WORKSPACE = "{{workspace}}" !== "None" ? "{{workspace}}" : null;
    var THREADS = "{{level.threads}}";
    var BLOCKLY_ENABLED = "{{level.blocklyEnabled}}" === "True";
    var PYTHON_ENABLED = "{{level.pythonEnabled}}" === "True";
    var PYTHON_VIEW_ENABLED = "{{level.pythonViewEnabled}}" === "True";
    var RETURN_URL = "{{return_url}}";
    var PYTHON_WORKSPACE= "{{python_workspace|linebreaksbr}}" !== "" ? "{{python_workspace|linebreaksbr}}" : null;
  </script>

  <script type="text/javascript" src="{% static 'game/js/skulpt/skulpt.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/skulpt/skulpt-stdlib.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/skulpt/codemirror.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/skulpt/python.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/blockly_compressed.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/blocks_compressed.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/javascript_compressed.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/python_compressed.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/msg/js/en.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/mobile-detect.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/raphael.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/howler.js' %}"></script>

  <script type="text/javascript" src="{% static 'game/js/fpsmeter.js' %}"></script>

  <script type="text/javascript" src="{% static 'game/js/drawing.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/tab.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/messages.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/animation.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/pythonControl.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyControl.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyCompiler.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyCustomBlocks.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyCustomisations.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/model.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/pathFinder.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/map.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/trafficLight.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/destination.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/van.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/node.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/coordinate.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/program.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/sound.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/saving.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/game.js' %}"></script>

  <script type="text/javascript">
    $(function() {
      document.addEventListener('fps', function(e) {
        document.getElementById('fps').innerHTML = e.fps + ' fps';
      }, false);
      //FPSMeter.run(0.5);
    });
  </script>
  
{% endblock %}

{% block css %}
{{block.super}}
  {% compress css %}
    <link href="{% static 'game/css/game.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/game_screen.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/skulpt/codemirror.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/skulpt/eclipse.css' %}" rel="stylesheet" type="text/css">
  {% endcompress %}
{% endblock %}

{% block content %}

<div style='position: fixed; top: 0px; right: 0px; background: black; z-index: 99'>
  <div id='fps' style='font-size: 2em; color: white'></div>
</div>

<div id="wrapper" class="unselectable">
  <div id="tabs" class='no-print'>
    <div class="tab selectable {% if level.blocklyEnabled %}{% else %}hidden{% endif %}">
      <input type="radio" name="tabs" id="blockly_radio" checked>
      <label for="blockly_radio">
        <img src='/static/game/image/icons/blockly.svg'>
        <span>Blockly</span>
      </label>
    </div>
    
    <div class="tab selectable {% if level.pythonEnabled %}{% else %}hidden{% endif %}">
      <input type="radio" name="tabs" id="python_radio">
      <label for="python_radio">
        <img src='/static/game/image/icons/python.svg'>
        <span>Python</span>
      </label>
    </div>

    <div class="tab">
      <input type="radio" name="tabs" id="clear_program_radio">
      <label for="clear_program_radio">
        <img src='/static/game/image/icons/clear.svg'>
        <span>Clear</span>
      </label>
    </div>

    <div class="tab_break"></div>  

    <div class="tab">
      <input type="radio" name="tabs" id="play_radio">
      <label for="play_radio">
        <img src='/static/game/image/icons/play.svg'>
        <span>Play</span>
        {% csrf_token %}
      </label>
    </div>

    <div class="tab">
      <input type="radio" name="tabs" id="stop_radio">
      <label for="stop_radio">
        <img src='/static/game/image/icons/stop.svg'>
        <span>Stop</span>
      </label>
    </div>

    <div class="tab">
      <input type="radio" name="tabs" id="step_radio">
      <label for="step_radio">
        <img src='/static/game/image/icons/step.svg'>
        <span>Step</span>
      </label>
    </div>

    <div class="tab_break"></div> 

    <div class="tab selectable">
      <input type="radio" name="tabs" id="load_radio">
      <label for="load_radio">
        <img src='/static/game/image/icons/load.svg'>
        <span>Load</span>
      </label>
    </div>

    <div class="tab selectable">
      <input type="radio" name="tabs" id="save_radio">
      <label for="save_radio">
        <img src='/static/game/image/icons/save.svg'>
        <span>Save</span>
      </label>
    </div>

    <!-- <div class="tab">
      <input type="radio" name="tabs" id="print_radio">
      <label for="print_radio">
        <img src='/static/game/image/icons/print.svg'>
        <span>Print</span>
      </label>
    </div> -->

    <div class="tab_break"></div> 

    <div class="tab selectable">
      <input type="radio" name="tabs" id="help_radio">
      <label for="help_radio">
        <img src='/static/game/image/icons/help.svg'>
        <span>Help</span>
      </label>
    </div>

    <!--div class="tab">
      <input type="radio" name="tabs" id="big_code_mode_radio">
      <label for="big_code_mode_radio">
        <img src='/static/game/image/icons/big_code_mode.svg'>
        <span>Enlarge</span>
      </label>
    </div-->

    <div class="tab">
      <input type="radio" name="tabs" id="mute_radio">
      <label for="mute_radio">
        <img id="mute_img" src='/static/game/image/icons/muted.svg'>
        <span id="mute_text">Mute</span>
      </label>
    </div>

    <div class="tab">
      <input type="radio" name="tabs" id="quit_radio">
      <label for="quit_radio">
        <img src='/static/game/image/icons/quit.svg'>
        <span>Quit</span>
      </label>
    </div>
  </div>

  <div id="right">
    <div id="tab_panes" class='no-print'>

      <div id="blockly_pane" class="tab_pane">
        <button id="flyoutButton">
          <img id="flyoutButtonImage" src="">
        </button>

        <div id="blockCountDiv"></div>

        <div id="blockly_holder" style='width: calc(100% + 55px); margin-left: -55px; {% if level.pythonViewEnabled %} height: 50%{% endif %}'></div>
        
        <div id="editor" {% if not level.pythonViewEnabled %} style="visibility: hidden" {% endif %}>
          <p>This is what your program would look like in Python:</p>
          <textarea id="pythonView" cols="85" rows="25"></textarea>
        </div>
      </div>

      <div id="python_pane" class="tab_pane">
        <div id="pythonCode" {% if not level.pythonEnabled %} style="visibility: hidden" {% endif %}>
          <h3>Python Program
            {% if level.blocklyEnabled %}
            <button class="navigation_button long_button" id="convert_from_blockly">
              <span>Convert from Blockly</span>
            </button>
            {% endif %}
          </h3>
            <div id="editor">
              <p>Use the Python editor below to design your program, and then click play to try it out!</p>
              <textarea id="code" cols="85" rows="25"></textarea>
            </div>

            <div id="console">
              <h4 style="height:50px; line-height: 50px;">
                Console Output
                <button class="navigation_button long_button" id="clear_console">
                  <img src="/static/game/image/icons/clear.svg">
                  <span>Clear console</span>
                </button>
              </h4>
              <textarea disabled="" id="consoleOutput"></textarea>
            </div>

            <div id="python_help">
              <h4>Van Commands</h4>
              <p>Run the following commands on the van object v, e.g. v.move_forwards()</p>
              <div class="row">
                <div class="large-4 columns">
                  <p><b>Movement</b>
                  <br>v.move_forwards()
                  <br>v.turn_left()
                  <br>v.turn_right()
                  <br>v.turn_around()
                  <br>v.wait()</p>
                </div>
                <div class="large-4 columns">
                  <p><b>Position</b>
                  <br>v.at_dead_end()
                  <br>v.at_destination()
                  <br>v.at_red_traffic_light()
                  <br>v.at_green_traffic_light()
                  <br>v.at_traffic_light(c)
                  <br><i>where c is 'RED' or 'GREEN'</i></p>
                </div>
                <div class="large-4 columns">
                  <p>
                  <br>v.is_road_forward()
                  <br>v.is_road_left()
                  <br>v.is_road_right()
                  <br>v.is_road(d)
                  <br><i>where d is 'FORWARD',
                  <br>'LEFT', or 'RIGHT'</i></p>
                </div>
              </div>
            </div>
        </div>
      </div>

      <div id="load_pane" class="tab_pane">
        <h2 class="title"><img class="modal_image" src='/static/game/image/icons/load.svg'>Load</h2>
          <p>Here you can load a program you've previously saved!</p>
          <div style="width:auto">
            <div id="does_not_exist">
              <p> You don't have any programs to load yet. Try saving one! </p>
            </div>
            <div class="scrolling-table-wrapper">
              <table id="loadWorkspaceTableHeader">
                <thead>
                  <tr>  
                    <th>Name</th>
                  </tr>
                </thead>
              </table>
              <div class="scrolling-table">
                <table id="loadWorkspaceTable">
                  <tbody></tbody>
                </table>
              </div>
            </div>
            <br>
            <div>
              <button class="navigation_button long_button" id="deleteWorkspace">
                <img src="/static/game/image/icons/clear.svg"/>
                <span>Delete</span>
              </button>

              <button class="navigation_button long_button" id="loadWorkspace">
                <img src="/static/game/image/icons/load.svg"/>
                <span>Load</span>
              </button>
            </div>
          </div>
      </div>

      <div id="save_pane" class="tab_pane">
        <h2 class="title"><img class="modal_image" src='/static/game/image/icons/save.svg'>Save</h2>
        <p>Here you can save your program so you can retrieve it later!</p>
        <div class="scrolling-table-wrapper">
          <table id="saveWorkspaceTableHeader">
            <thead>
              <tr>  
                <th>Name</th>
              </tr>
            </thead>
          </table>
          <div class="scrolling-table">
            <table id="saveWorkspaceTable">
              <tbody></tbody>
            </table>
          </div>
        </div>
        <br>
        <div>
          <input type="text" id="workspaceNameInput">
          <button class="navigation_button long_button" id="saveWorkspace">
            <img src="/static/game/image/icons/save.svg">
            <span>Save</span>
          </button>
        </div>
      </div>
    </div>

    <div id="paper" class="col" style="background-color:{{level.theme.background}}"></div>
    
    <div id="direct_drive" class="unselectable no-print">
      <button class="direct_drive_button" id="moveForward" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="turnLeft" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="go" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="turnRight" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
    </div>

    <div id="fuelGauge" class="no-print unselectable">
      <img src="/static/game/image/fuelGauge.svg"/>
      <div id="fuelGaugePointer">
        <img src="/static/game/image/fuelGaugePointer.svg"/>
      </div>
    </div>

    <div id="consoleSlider" class="no-print"></div>

  </div>
</div>

<div id="myModal" class="ocargo-modal reveal-modal no-print" data-reveal>
  <div id="modal-text">
    <h2 id="myModal-title" class="ocargo-modal-title"></h2>
    <p id="myModal-lead" class="ocargo-modal-lead"></p>
    <p id="myModal-mainText" class="ocargo-modal-mainText"></p>
    <a class="close-reveal-modal" id="close-modal">&#215;</a>
  </div>
  <div id="modal-buttons">
    <button>OK</button>
  </div>
  <div id="modal-mascot">
    <object width="100%" height="100%" data="/static/game/image/characters/front_view/Dee.svg" type="image/svg+xml"></object>
  </div>
</div>

{% endblock %}
<commit_msg>Fix for python workspace not initialising properly<commit_after>{% extends 'game/basenonav.html' %}

{% load static %}
{% load compress %}
{% load i18n %}

{% block scripts %}
{{block.super}}
  <script>
    var ANONYMOUS = '{{level.anonymous}}' === 'True';
    var PATH = {{level.path|safe}};
    var ORIGIN = {{level.origin|safe}};
    var DESTINATIONS = {{level.destinations|safe}};
    var DECOR = {{decor|safe}};
    var BACKGROUND_URL = "{{background}}";
    var HOUSE_URL = "{{house}}";
    var CFC_URL = "{{cfc}}";
    var TRAFFIC_LIGHTS = {{level.traffic_lights|safe}};
    var LEVEL_ID = "{{level.id}}" !== "None" ? "{{level.id}}" : "";
    var LEVEL_NAME = "{{level.name}}";
    var MODEL_SOLUTION = {{level.model_solution}};
    var DISABLE_ROUTE_SCORE = "{{level.disable_route_score}}" === "True";
    var LESSON = "{{lesson}}";
    var HINT = "{{hint}}";
    var DEFAULT_LEVEL = "{{level.default}}" === "True";
    var FUEL_GAUGE = "{{level.fuel_gauge}}" === "True";
    var CHARACTER_NAME = "{{character.name}}";
    var CHARACTER_URL = "{{character.top_down}}";
    var CHARACTER_EN_FACE_URL = "{{character.en_face}}"
    var CHAR_WIDTH = {{character.width}};
    var CHAR_HEIGHT = {{character.height}};
    var RANDOM = "{{episode.random_levels_enabled}}" === "True";

    var BLOCKS =  [];
    {% for block in blocks %}
      BLOCKS.push({'type':"{{block.type}}"{% if block.number %}, 'number':{{block.number}} {% endif %}});
    {% endfor %}

    var BLOCKLY_XML = '<xml id="blockly_toolbox" style="display: none"><category name="+">';
    for (var i = 0; i < BLOCKS.length; i++) {
        BLOCKLY_XML += '<block type="' + BLOCKS[i].type + '"></block>';
    }

    BLOCKLY_XML += '</category></xml>';
    var MAX_FUEL = {{level.max_fuel}};
    var DIRECT_DRIVE = "{{level.direct_drive}}" === "True";
    var NEXT_LEVEL = "{{level.next_level}}" !== "None" ? "{{level.next_level.name}}" : null;
    var NEXT_EPISODE = "{{level.episode.next_episode}}" !== "None" ? "{{level.episode.next_episode.id}}" : null;
    var WORKSPACE = "{{workspace}}" !== "None" ? "{{workspace}}" : null;
    var THREADS = "{{level.threads}}";
    var BLOCKLY_ENABLED = "{{level.blocklyEnabled}}" === "True";
    var PYTHON_ENABLED = "{{level.pythonEnabled}}" === "True";
    var PYTHON_VIEW_ENABLED = "{{level.pythonViewEnabled}}" === "True";
    var RETURN_URL = "{{return_url}}";
    var PYTHON_WORKSPACE= "{{python_workspace|linebreaksbr}}" !== "None" ? "{{python_workspace|linebreaksbr}}" : null;
  </script>

  <script type="text/javascript" src="{% static 'game/js/skulpt/skulpt.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/skulpt/skulpt-stdlib.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/skulpt/codemirror.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/skulpt/python.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/blockly_compressed.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/blocks_compressed.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/javascript_compressed.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/python_compressed.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blockly/msg/js/en.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/mobile-detect.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/raphael.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/howler.js' %}"></script>

  <script type="text/javascript" src="{% static 'game/js/fpsmeter.js' %}"></script>

  <script type="text/javascript" src="{% static 'game/js/drawing.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/tab.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/messages.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/animation.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/pythonControl.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyControl.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyCompiler.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyCustomBlocks.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyCustomisations.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/model.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/pathFinder.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/map.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/trafficLight.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/destination.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/van.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/node.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/coordinate.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/program.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/sound.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/saving.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/game.js' %}"></script>

  <script type="text/javascript">
    $(function() {
      document.addEventListener('fps', function(e) {
        document.getElementById('fps').innerHTML = e.fps + ' fps';
      }, false);
      //FPSMeter.run(0.5);
    });
  </script>
  
{% endblock %}

{% block css %}
{{block.super}}
  {% compress css %}
    <link href="{% static 'game/css/game.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/game_screen.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/skulpt/codemirror.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/skulpt/eclipse.css' %}" rel="stylesheet" type="text/css">
  {% endcompress %}
{% endblock %}

{% block content %}

<div style='position: fixed; top: 0px; right: 0px; background: black; z-index: 99'>
  <div id='fps' style='font-size: 2em; color: white'></div>
</div>

<div id="wrapper" class="unselectable">
  <div id="tabs" class='no-print'>
    <div class="tab selectable {% if level.blocklyEnabled %}{% else %}hidden{% endif %}">
      <input type="radio" name="tabs" id="blockly_radio" checked>
      <label for="blockly_radio">
        <img src='/static/game/image/icons/blockly.svg'>
        <span>Blockly</span>
      </label>
    </div>
    
    <div class="tab selectable {% if level.pythonEnabled %}{% else %}hidden{% endif %}">
      <input type="radio" name="tabs" id="python_radio">
      <label for="python_radio">
        <img src='/static/game/image/icons/python.svg'>
        <span>Python</span>
      </label>
    </div>

    <div class="tab">
      <input type="radio" name="tabs" id="clear_program_radio">
      <label for="clear_program_radio">
        <img src='/static/game/image/icons/clear.svg'>
        <span>Clear</span>
      </label>
    </div>

    <div class="tab_break"></div>  

    <div class="tab">
      <input type="radio" name="tabs" id="play_radio">
      <label for="play_radio">
        <img src='/static/game/image/icons/play.svg'>
        <span>Play</span>
        {% csrf_token %}
      </label>
    </div>

    <div class="tab">
      <input type="radio" name="tabs" id="stop_radio">
      <label for="stop_radio">
        <img src='/static/game/image/icons/stop.svg'>
        <span>Stop</span>
      </label>
    </div>

    <div class="tab">
      <input type="radio" name="tabs" id="step_radio">
      <label for="step_radio">
        <img src='/static/game/image/icons/step.svg'>
        <span>Step</span>
      </label>
    </div>

    <div class="tab_break"></div> 

    <div class="tab selectable">
      <input type="radio" name="tabs" id="load_radio">
      <label for="load_radio">
        <img src='/static/game/image/icons/load.svg'>
        <span>Load</span>
      </label>
    </div>

    <div class="tab selectable">
      <input type="radio" name="tabs" id="save_radio">
      <label for="save_radio">
        <img src='/static/game/image/icons/save.svg'>
        <span>Save</span>
      </label>
    </div>

    <!-- <div class="tab">
      <input type="radio" name="tabs" id="print_radio">
      <label for="print_radio">
        <img src='/static/game/image/icons/print.svg'>
        <span>Print</span>
      </label>
    </div> -->

    <div class="tab_break"></div> 

    <div class="tab selectable">
      <input type="radio" name="tabs" id="help_radio">
      <label for="help_radio">
        <img src='/static/game/image/icons/help.svg'>
        <span>Help</span>
      </label>
    </div>

    <!--div class="tab">
      <input type="radio" name="tabs" id="big_code_mode_radio">
      <label for="big_code_mode_radio">
        <img src='/static/game/image/icons/big_code_mode.svg'>
        <span>Enlarge</span>
      </label>
    </div-->

    <div class="tab">
      <input type="radio" name="tabs" id="mute_radio">
      <label for="mute_radio">
        <img id="mute_img" src='/static/game/image/icons/muted.svg'>
        <span id="mute_text">Mute</span>
      </label>
    </div>

    <div class="tab">
      <input type="radio" name="tabs" id="quit_radio">
      <label for="quit_radio">
        <img src='/static/game/image/icons/quit.svg'>
        <span>Quit</span>
      </label>
    </div>
  </div>

  <div id="right">
    <div id="tab_panes" class='no-print'>

      <div id="blockly_pane" class="tab_pane">
        <button id="flyoutButton">
          <img id="flyoutButtonImage" src="">
        </button>

        <div id="blockCountDiv"></div>

        <div id="blockly_holder" style='width: calc(100% + 55px); margin-left: -55px; {% if level.pythonViewEnabled %} height: 50%{% endif %}'></div>
        
        <div id="editor" {% if not level.pythonViewEnabled %} style="visibility: hidden" {% endif %}>
          <p>This is what your program would look like in Python:</p>
          <textarea id="pythonView" cols="85" rows="25"></textarea>
        </div>
      </div>

      <div id="python_pane" class="tab_pane">
        <div id="pythonCode" {% if not level.pythonEnabled %} style="visibility: hidden" {% endif %}>
          <h3>Python Program
            {% if level.blocklyEnabled %}
            <button class="navigation_button long_button" id="convert_from_blockly">
              <span>Convert from Blockly</span>
            </button>
            {% endif %}
          </h3>
            <div id="editor">
              <p>Use the Python editor below to design your program, and then click play to try it out!</p>
              <textarea id="code" cols="85" rows="25"></textarea>
            </div>

            <div id="console">
              <h4 style="height:50px; line-height: 50px;">
                Console Output
                <button class="navigation_button long_button" id="clear_console">
                  <img src="/static/game/image/icons/clear.svg">
                  <span>Clear console</span>
                </button>
              </h4>
              <textarea disabled="" id="consoleOutput"></textarea>
            </div>

            <div id="python_help">
              <h4>Van Commands</h4>
              <p>Run the following commands on the van object v, e.g. v.move_forwards()</p>
              <div class="row">
                <div class="large-4 columns">
                  <p><b>Movement</b>
                  <br>v.move_forwards()
                  <br>v.turn_left()
                  <br>v.turn_right()
                  <br>v.turn_around()
                  <br>v.wait()</p>
                </div>
                <div class="large-4 columns">
                  <p><b>Position</b>
                  <br>v.at_dead_end()
                  <br>v.at_destination()
                  <br>v.at_red_traffic_light()
                  <br>v.at_green_traffic_light()
                  <br>v.at_traffic_light(c)
                  <br><i>where c is 'RED' or 'GREEN'</i></p>
                </div>
                <div class="large-4 columns">
                  <p>
                  <br>v.is_road_forward()
                  <br>v.is_road_left()
                  <br>v.is_road_right()
                  <br>v.is_road(d)
                  <br><i>where d is 'FORWARD',
                  <br>'LEFT', or 'RIGHT'</i></p>
                </div>
              </div>
            </div>
        </div>
      </div>

      <div id="load_pane" class="tab_pane">
        <h2 class="title"><img class="modal_image" src='/static/game/image/icons/load.svg'>Load</h2>
          <p>Here you can load a program you've previously saved!</p>
          <div style="width:auto">
            <div id="does_not_exist">
              <p> You don't have any programs to load yet. Try saving one! </p>
            </div>
            <div class="scrolling-table-wrapper">
              <table id="loadWorkspaceTableHeader">
                <thead>
                  <tr>  
                    <th>Name</th>
                  </tr>
                </thead>
              </table>
              <div class="scrolling-table">
                <table id="loadWorkspaceTable">
                  <tbody></tbody>
                </table>
              </div>
            </div>
            <br>
            <div>
              <button class="navigation_button long_button" id="deleteWorkspace">
                <img src="/static/game/image/icons/clear.svg"/>
                <span>Delete</span>
              </button>

              <button class="navigation_button long_button" id="loadWorkspace">
                <img src="/static/game/image/icons/load.svg"/>
                <span>Load</span>
              </button>
            </div>
          </div>
      </div>

      <div id="save_pane" class="tab_pane">
        <h2 class="title"><img class="modal_image" src='/static/game/image/icons/save.svg'>Save</h2>
        <p>Here you can save your program so you can retrieve it later!</p>
        <div class="scrolling-table-wrapper">
          <table id="saveWorkspaceTableHeader">
            <thead>
              <tr>  
                <th>Name</th>
              </tr>
            </thead>
          </table>
          <div class="scrolling-table">
            <table id="saveWorkspaceTable">
              <tbody></tbody>
            </table>
          </div>
        </div>
        <br>
        <div>
          <input type="text" id="workspaceNameInput">
          <button class="navigation_button long_button" id="saveWorkspace">
            <img src="/static/game/image/icons/save.svg">
            <span>Save</span>
          </button>
        </div>
      </div>
    </div>

    <div id="paper" class="col" style="background-color:{{level.theme.background}}"></div>
    
    <div id="direct_drive" class="unselectable no-print">
      <button class="direct_drive_button" id="moveForward" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="turnLeft" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="go" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="turnRight" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
    </div>

    <div id="fuelGauge" class="no-print unselectable">
      <img src="/static/game/image/fuelGauge.svg"/>
      <div id="fuelGaugePointer">
        <img src="/static/game/image/fuelGaugePointer.svg"/>
      </div>
    </div>

    <div id="consoleSlider" class="no-print"></div>

  </div>
</div>

<div id="myModal" class="ocargo-modal reveal-modal no-print" data-reveal>
  <div id="modal-text">
    <h2 id="myModal-title" class="ocargo-modal-title"></h2>
    <p id="myModal-lead" class="ocargo-modal-lead"></p>
    <p id="myModal-mainText" class="ocargo-modal-mainText"></p>
    <a class="close-reveal-modal" id="close-modal">&#215;</a>
  </div>
  <div id="modal-buttons">
    <button>OK</button>
  </div>
  <div id="modal-mascot">
    <object width="100%" height="100%" data="/static/game/image/characters/front_view/Dee.svg" type="image/svg+xml"></object>
  </div>
</div>

{% endblock %}

{'fraction_non_alphanumeric': 0.1947100159845583, 'fraction_numerical': 0.0033175498386464396, 'mean_word_length': 2.6401361291030847, 'pattern_counts': {'":': 0, '<': 817, '<?xml version=': 0, '>': 815, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 6}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2463116', 'n_tokens_mistral': 11386, 'n_tokens_neox': 10745, 'n_words': 2113}