{% extends 'game/basenonav.html' %}

{% load static %}
{% 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 COWS = {{level.cows|safe}};
    var EPISODE = "{{level.episode.id}}";
    var LEVEL_ID = "{{level.id}}" !== "None" ? "{{level.id}}" : "";
    var LEVEL_NAME = "{{level.name}}";
    var NEXT_LEVEL_URL = "{% if next_level_url %}{{next_level_url}}{% else %}{% endif %}";
    var MODEL_SOLUTION = {% if model_solution %}{{model_solution}}{% else %}[]{% endif %};
    var DISABLE_ROUTE_SCORE = "{{level.disable_route_score}}" === "True";
    var LESSON = "{{lesson|escapejs}}";
    var HINT = "{{hint}}";
    var DEFAULT_LEVEL = "{{level.default}}" === "True";
    var FUEL_GAUGE = "{{level.fuel_gauge}}" === "True";
    var CHARACTER_NAME = "{{character.name}}";
    var CHARACTER_EN_FACE_URL = "{{character.en_face}}";
    var CHARACTER_URL = "{{character_url}}";
    var CHARACTER_HEIGHT = "{{character_height}}";
    var CHARACTER_WIDTH = "{{character_width}}";
    var WRECKAGE_URL = "{{wreckage_url}}";
    var NIGHT_MODE_FEATURE_ENABLED = {{night_mode_feature_enabled}};
    var NIGHT_MODE = {{night_mode}};
    var FLIP_NIGHT_MODE_URL = "{% if flip_night_mode_url %}{{flip_night_mode_url}}{% else %}{% endif %}";

    var RANDOM = "{{episode.random_levels_enabled}}" === "True";
    var IS_RANDOM_LEVEL = "{{random_level}}" === "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_EPISODE = "{{level.episode.next_episode}}" !== "None" ? "{{level.episode.next_episode.id}}" : null;
    var WORKSPACE = "{{workspace}}" !== "None" ? "{{workspace}}" : null;
    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/utils.js' %}"></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/drawingConstants.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/character.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/cow.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" src="{% static 'game/js/event.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}}
    <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">
{% endblock %}

{% block content %}
{{ block.super }}
<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">
  <span id="game_page"></span>

  <div id="tabs" class='no-print'>
    <div id="blockly_tab" 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>{% trans "Blockly" %}</span>
      </label>
    </div>
    <div id="python_tab" 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>{% trans "Python" %}</span>
      </label>
    </div>

    <div id="clear_tab" 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>{% trans "Clear" %}</span>
      </label>
    </div>

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

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

    <div id="fast_tab" class="tab">
      <input type="radio" name="tabs" id="fast_radio">
      <label for="fast_radio">
          <img src='{% static "game/image/icons/fast.svg" %}'>
          <span>{% trans "Fast" %}</span>
      </label>
    </div>

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

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

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

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

    <div id="save_tab" class="tab selectable">
      <input type="radio" name="tabs" id="save_radio">
      <label for="save_radio">
        <img src='{% static "game/image/icons/save.svg" %}'>
        <span>{% trans "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 id="help_tab" class="tab selectable">
      <input type="radio" name="tabs" id="help_radio">
      <label for="help_radio">
        <img src='{% static "game/image/icons/help.svg" %}'>
        <span>{% trans "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 id="mute_tab" 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">{% trans "Mute" %}</span>
      </label>
    </div>

  <div id="nightmode_tab" class="tab hidden">
      <input type="radio" name="tabs" id="nightmode_radio">
      <label for="nightmode_radio">
          {% if night_mode == "true" %}
        <img src='/static/game/image/icons/day.svg'>
        <span>{% trans "Day" %}</span>
          {% else %}
          <img src='/static/game/image/icons/night.svg'>
        <span>{% trans "Night" %}</span>
          {% endif %}
      </label>
    </div>

    <div  id="quit_tab"class="tab">
      <input type="radio" name="tabs" id="quit_radio">
      <label for="quit_radio">
        <img src='{% static "game/image/icons/quit.svg" %}'>
        <span>{% trans "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 {% if not level.pythonViewEnabled %} style="visibility: hidden" {% endif %}>
          <p>{% trans "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>{% trans "Python Program" %}
            {% if level.blocklyEnabled %}
            <button class="navigation_button long_button" id="convert_from_blockly">
              <span>{% trans "Convert from Blockly" %}</span>
            </button>
            {% endif %}
          </h3>
            <div id="editor">
              <div>
                <div id="pythonIntro">{% trans "Use the Python editor below to design your program, and then click play to try it out!" %}</div>
                <button class="navigation_button long_button" id="van_commands_help">
                  <img src="{% static "game/image/icons/python.svg" %}">
                  <span>{% trans "Commands" %}</span>
                </button>
              </div>
              <textarea id="code" cols="85" rows="25"></textarea>
            </div>

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

      <div id="load_pane" class="tab_pane">
        <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/load.svg" %}'>{% trans "Load" %}</h2>
          <p>{% trans "Here you can load a program you've previously saved!" %}</p>
          <div style="width:auto">
            <div id="does_not_exist">
              <p> {% trans "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>{% trans "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>{% trans "Delete" %}</span>
              </button>

              <button class="navigation_button long_button" id="loadWorkspace">
                <img src="{% static "game/image/icons/load.svg" %}"/>
                <span>{% trans "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" %}'>{% trans "Save" %}</h2>
        <p>{% trans "Here you can save your program so you can retrieve it later!" %}</p>
        <div class="scrolling-table-wrapper">
          <table id="saveWorkspaceTableHeader">
            <thead>
              <tr>
                <th>{% trans "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>{% trans "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>

{% endblock %}
