{% extends 'game/basenonav.html' %}
{% load i18n %}
{% load static %}
{% load app_tags %}
{% load game.utils %}

{% block title %}Code for Life - Rapid Router - Create{% endblock %}

{% block head %}
  <meta name="viewport" content="user-scalable=no" />
  {% include 'game/crowdin.html' %}
{% endblock %}

{% block scripts %}
{{block.super}}
  <script>
    var COW_LEVELS_ENABLED = {{cow_level_enabled|booltojs}};
    var NIGHT_MODE_FEATURE_ENABLED = {{night_mode_feature_enabled}};
  </script>
  <script src="{% static "game/js/utils.js" %}"></script>
  <script src="{% static "game/js/mobile-detect.min.js" %}"></script>
  <script src="{% static "game/js/raphael.js" %}"></script>
  <script src="{% static 'game/js/drawingConstants.js' %}"></script>
  <script src="{% static 'game/js/character.js' %}"></script>
  <script src="{% static "game/js/drawing.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/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/blocklyCustomBlocks.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyControl.js' %}"></script>
  <script type="text/javascript" src="{% static 'game/js/blocklyMessages.js' %}"></script>

  <script src="/static/game/js/tab.js"></script>
  <script src="/static/game/js/messages.js"></script>
  <script src="/static/game/js/saving.js"></script>
  <script src="/static/game/js/level_editor/level_save_state.js"></script>
  <script src="/static/game/js/level_editor/owned_levels.js"></script>
  <script src="/static/game/js/level_editor.js"></script>
  <script src="/static/game/js/coordinate.js"></script>
  <script src="/static/game/js/node.js"></script>
  <script src="/static/game/js/map.js"></script>
  <script src="/static/game/js/pathFinder.js"></script>
  <script src="/static/game/js/trafficLight.js"></script>
  {% if cow_level_enabled %}<script src="/static/game/js/cow.js"></script>{% endif %}
  <script src="/static/game/js/destination.js"></script>

  <script>
    var BLOCKS = {{ blocks | safe}};
    var THEMES =  [];
    var CHARACTER_NAME = 'Van';

    function initGlobals() {
      var themes = [];
      {% for theme in themes %}
        var name = "{{theme.name}}";
        themes.push({
            "name": name,
            "id": {{theme.id}},
            "border": "{{theme.border}}",
            "background": "{{theme.background}}",
            "selected": "{{theme.selected}}"
        });
      {% endfor %}

      var decor = [];
      {% for dec in decor %}
        decor.push({
            "id":"{{dec.id}}",
            "name":"{{dec.name}}",
            "url": ocargo.Drawing.raphaelImageDir + "{{dec.url}}",
            "width":"{{dec.width}}",
            "height":"{{dec.height}}",
            "theme_name":"{{dec.theme.name}}",
            "z_index":"{{ dec.z_index }}"
        });
      {% endfor %}

      for(var i = 0; i < themes.length; i++) {
        var theme = themes[i];
        THEMES[theme.name] = theme;
        THEMES[theme.name].decor = {};
      }

      for(var i = 0; i < decor.length; i++) {
        var themeDecor = THEMES[decor[i].theme_name].decor;
        themeDecor[decor[i].name] = decor[i];
      }

      CHARACTERS = [];
      {% for char in characters %}
        CHARACTERS['{{char.id}}'] = {
            id: '{{char.id}}',
            name: '{{char.name}}',
            image: '{% static "game/image/"|add:char.en_face %}'
        };
      {% endfor %}
    }

    initGlobals();
  </script>
{% endblock %}

{% block css %}
{{ block.super }}
  <link href="{% static "game/css/game_screen.css" %}" rel="stylesheet" type="text/css">
  <link href="{% static "game/css/level_editor.css" %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block content %}
{{ block.super }}
<div>

</div>

<div id="wrapper" class="unselectable">
  <span id="editor_page"></span>
  <div id="tools" class="col">

    <div id="toolbox">
      <div id="tabs">

        <div id="currentTool" class="mode_panel">
          <img id="currentToolIcon" src="{% static "game/image/icons/delete_road.svg" %}" >
          <br>
          <span id="currentToolText">{% trans "Delete Road" %}</span>
        </div>

        <br style="clear:both">

        <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>
          </label>
        </div>

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

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

        <div id="map_tab"  class="tab selectable">
          <input type="radio" name="tabs" id="map_radio">
          <label for="map_radio">
            <img src='{% static "game/image/icons/map.svg" %}'>
            <span>{% trans "Map" %}</span>
          </label>
        </div>

        <div id="scenery_tab"  class="tab selectable">
          <input type="radio" name="tabs" id="scenery_radio">
          <label for="scenery_radio">
            <img src='{% static "game/image/icons/decor.svg" %}'>
            <span>{% trans "Scenery" %}</span>
          </label>
        </div>

        <div id="character_tab"  class="tab selectable">
          <input type="radio" name="tabs" id="character_radio">
          <label for="character_radio">
            <img src='{% static "game/image/icons/character.svg" %}'>
            <span>{% trans "Character" %}</span>
          </label>
        </div>

        <div id="blocks_tab"  class="tab selectable">
          <input type="radio" name="tabs" id="blocks_radio">
          <label for="blocks_radio">
            <img src='{% static "game/image/icons/blockly.svg" %}'>
            <span>{% trans "Code" %}</span>
          </label>
        </div>

        <div id="random_tab"  class="tab selectable">
          <input type="radio" name="tabs" id="random_radio">
          <label for="random_radio">
            <img src='{% static "game/image/icons/random.svg" %}'>
            <span>{% trans "Random" %}</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 id="share_tab"  class="tab selectable">
          <input type="radio" name="tabs" id="share_radio">
          <label for="share_radio">
            <img src='{% static "game/image/icons/share.svg" %}'>
            <span>{% trans "Share" %}</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 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='tab_panes_wrapper'>
        <div id="tab_panes">
          <div id="map_pane" class="tab_pane">
            <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/map.svg" %}'>{% trans "Map" %}</h2>
            <p> {% trans "Here you can design your level! What sort of road will you make?" %}</p>

            <div class="tab_pane_content_holder">
              <div class="tab_pane_content">
                <div class="input_div">
                  <span>{% trans "Max fuel:" %}</span>
                  <input type="number" id="max_fuel">
                </div>
                <br style="clear:both">

                <div class="table">
                  <div class="table_row">
                    <div class="table_cell">
                      <button class="mode_panel navigation_button" id="add_road">
                        <img src="{% static "game/image/icons/add_road.svg" %}"/>
                        <span>{% trans "Add road" %}</span>
                      </button>
                    </div>
                    <div class="table_cell">
                      <button class="mode_panel navigation_button" id="delete_road">
                        <img src="{% static "game/image/icons/delete_road.svg" %}"/>
                        <span>{% trans "Delete road" %}</span>
                      </button>
                    </div>
                  </div>
                  <div class="table_row">
                    <div class="table_cell">
                      <button class="mode_panel navigation_button" id="start">
                        <img src="{% static "game/image/icons/origin.svg" %}"/>
                        <span>{% trans "Mark start" %}</span>
                      </button>
                    </div>
                    <div class="table_cell">
                      <button class="mode_panel navigation_button" id="end">
                        <img src="{% static "game/image/icons/destination.svg" %}"/>
                        <span>{% trans "Mark end" %}</span>
                      </button>
                    </div>
                  </div>
                </div>

                <button class="navigation_button long_button" id="clear">
                  <img src="{% static "game/image/icons/clear.svg" %}"/>
                  <span>{% trans "Clear all" %}</span>
                </button>

                {% if user|is_developer %}
                <button class="navigation_button long_button" id="djangoText">
                  <span>Django migr text</span>
                </button>
                {% endif %}
              </div>
            </div>
          </div>

          <div id="scenery_pane" class="tab_pane">
            <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/decor.svg" %}'>{% trans "Scenery" %}</h2>
            <p> {% trans "Here you can liven up your level by choosing the theme and adding scenery! Will you create beautiful countryside or a bustling city?" %}</p>
            <div class="tab_pane_content_holder">
              <div class="tab_pane_content">

                <table>
                  <tbody>
                    <tr>
                      <td>{% trans "Theme:" %}</td>
                      <td colspan=2>
                        <select id="theme_select">
                          {% for theme in themes %}
                          <option value="{{theme.name}}">{{theme.text}}</option>
                          {% endfor %}
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td>{% trans "Scenery:" %}</td>
                      <td><div class="decor_div"><img id="tree1" class="decor_button" src="{{tree1.url}}" width="70"></td>
                      <td><div class="decor_div"><img id="tree2" class="decor_button" src="{{tree2.url}}" width="70"></div></td>
                    </tr>
                    <tr>
                      <td></td>
                      <td><div class="decor_div"><img id="bush" class="decor_button" src="{{bush.url}}" width="50"></div></td>
                      <td><div class="decor_div"><img id="pond" class="decor_button" src="{{pond.url}}" width="100"></div></td>
                    </tr>
                    <tr>
                      <td>{% trans "Traffic lights:" %}</td>
                      <td><img id="trafficLightRed" src="{% static "game/image/trafficLight_red.svg" %}" width="80"></td>
                        <td><img id="trafficLightGreen" src="{% static "game/image/trafficLight_green.svg" %}" width="80"></td>
                    </tr>
                    {% if cow_level_enabled %}
                    <tr>
                      <td>{% trans "Cows:" %}</td>
                      <td><img id="cow" src="/static/game/image/Clarice.svg" width="80"></td>
                      <td>
                        <button class="navigation_button" id="advanced_cow_options_button">
                              <img id="advanced_cow_options_button_icon" src="/static/game/image/icons/show.svg"/>
                              {% trans "Advanced" %}
                            </button>
                      </td>
                    </tr>
                    <tr>
                      <td></td>
                      <td colspan="2">
                        <div id="cow_advanced_div">
                          <h3 id="cow_advanced_options_title">{% trans "Advanced options" %}</h3>
                          <div id="cow_group_div">
                            <!--<h4>Group:</h4>-->
                            <div id="cow_group_buttons">
                              <button class="mode_panel navigation_button" id="remove_cow_group_button">
                                <img src="/static/game/image/icons/clear.svg"/>
                              </button>
                              <button class="mode_panel navigation_button" id="add_cow_group_button">
                                <img src="/static/game/image/icons/add.svg"/>
                              </button>
                            </div>
                            <div id="cow_group_select_div">
                              <select id="cow_group_select"></select>
                            </div>
                            <div id="cow_type_select_div">
                              <select id="cow_type_select"></select>
                            </div>
                            <div style="clear: both;"></div>
                            <h4>{% trans "How many cows should appear for this group?" %}</h4>
                            <div id="min_max_cow_div">
                                <label for="min_cows_spinner">{% trans "Min:" %}</label><input name="Min" class="spinner" id="min_cows_spinner" readonly>
                                <label for="max_cows_spinner">{% trans "Max:" %}</label><input name="Max" class="spinner" id="max_cows_spinner" readonly>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    {% endif %}
                  </tbody>
                </table>

                <br style="clear:both">

              </div>
            </div>
          </div>

          <div id="character_pane" class="tab_pane">
            <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/character.svg" %}'>{% trans "Character" %}</h2>
            <p> {% trans "Here you can choose your character. Who will you play as?" %}</p>
            <div class="tab_pane_content_holder">
              <div class="tab_pane_content">
                <p>{% trans "Character:" %}
                  <select id="character_select">
                  {% for char in characters %}
                    <option value='{{char.id}}'> {{char.name}} </option>
                  {% endfor %}
                  </select>
                </p>
                <img id="character_image" src="">
              </div>
            </div>
          </div>

          <div id="blocks_pane" class="tab_pane">
            <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/blockly.svg" %}'>{% trans "Code" %}</h2>
            <p> {% trans "Here you can select the code you can use while playing your new level!" %} </p>
            <div class="tab_pane_content_holder">
              <div class="tab_pane_content">
                <div id="block_table">

                  <div id="language_div" class="input_div">
                    <span>{% trans "Language:" %}</span>
                    <select id="language_select">
                      <option value="blockly">{% trans "Blockly" %}</option>
                      <option value="blocklyWithPythonView">{% trans "Blockly With Python View" %}</option>
                      <option value="python">{% trans "Python" %}</option>
                      <option value="both">{% trans "Both" %}</option>
                    </select>
                  </div>

                  <div id="blockly_blocks_div">
                    <div class="table_row">
                      <div class="table_cell">
                        <input type="checkbox" id="select_all_checkbox" class="block_checkbox">
                      </div>
                      <div>
                        <label id="select_all_label" for="select_all_checkbox"> {% trans "Select all" %}</label>
                      </div>
                    </div>

                    {% for block in blocks %}
                      <div class="table_row">
                        <div class="table_cell">
                          <input type="checkbox" id="{{block}}_checkbox" class="block_checkbox" unchecked>
                        </div>
                        <div id="{{block}}_image" class="table_cell unselectable"></div>
                        <select id="{{block}}_number" class="block_number" class="table_cell unselectable">
                          <option value="infinity">&infin;</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                        </select>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div id="random_pane" class="tab_pane">
            <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/random.svg" %}'>{% trans "Random" %}</h2>
            <p> {% trans "Here you can generate a random map. Try changing some of the parameters below and see what you get!" %} </p>
            <div class="tab_pane_content_holder">
              <div class="tab_pane_content">
                <div class="table">
                  <div class="table_row">
                    <div class="table_cell field_label"><p>{% trans "Size:" %}</p></div>
                    <div class="table_cell field_value"><input type="number" id="size" value="20" size="4" min="2" max="40"></div>
                  </div>
                  <div class="table_row">
                    <div class="table_cell field_label"><p>{% trans "Branchiness:" %}</p></div>
                    <div class="table_cell field_value"><input type="number" id="branchiness" value="1" size="4" min="0" max="10"></div>
                  </div>
                  <div class="table_row">
                    <div class="table_cell field_label"><p>{% trans "Loopiness:" %}</p></div>
                    <div class="table_cell field_value"><input type="number" id="loopiness" value="1" size="4" min="0" max="10"></div>
                  </div>
                  <div class="table_row">
                    <div class="table_cell field_label"><p>{% trans "Curviness:" %}</p></div>
                    <div class="table_cell field_value"><input type="number" id="curviness" value="5" size="4" min="0" max="10"></div>
                  </div>
                  <div class="table_row">
                    <div class="table_cell field_label"><p>{% trans "Traffic Lights:" %}</p></div>
                    <div class="table_cell field_value">
                      <select id="trafficLightsEnabled">
                        <option value="yes">{% trans "Yes" %}</option>
                        <option value="no" selected>{% trans "No" %}</option>
                      </select>
                    </div>
                  </div>
                  <div class="table_row">
                    <div class="table_cell field_label"><p>{% trans "Scenery:" %}</p></div>
                    <div class="table_cell field_value">
                      <select id="sceneryEnabled">
                        <option value="yes">{% trans "Yes" %}</option>
                        <option value="no" selected>{% trans "No" %}</option>
                      </select>
                    </div>
                  </div>
                </div>
                <button class="navigation_button long_button" id="generate">
                  <img src="{% static "game/image/icons/random.svg" %}">
                  <span>{% trans "Generate" %}</span>
                </button>
              </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 in levels created by you and your friends! Select a level in the table and press load." %}</p>

            <div class="table_control_div">

              <div id="does_not_exist">
                <p> {% trans "You don't have any levels to load yet. Try saving one!" %} </p>
              </div>

              <div id="does_exist">
                <p>
                  {% trans "Load:" %}
                  <select id="load_type_select">
                    <option value="ownLevels" selected>{% trans "your own levels" %}</option>
                    <option value="sharedLevels">{% trans "shared levels" %}</option>
                  </select>
                </p>

                <div class="scrolling-table-wrapper">
                  <table width='100%' id="loadLevelTableHeader">
                    <thead>
                      <tr>
                        <th>{% trans "Name" %}</th>
                        <th>{% trans "Owner" %}</th>
                      </tr>
                    </thead>
                  </table>
                  <div class="scrolling-table">
                    <table width='100%' id="loadLevelTable">
                      <tbody></tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <br style="clear:both">

            <div>
              <button class="navigation_button long_button" id="deleteLevel">
                <img src="{% static "game/image/icons/clear.svg" %}">
                <span>{% trans "Delete" %}</span>
              </button>

              <button class="navigation_button long_button" id="loadLevel">
                <img src="{% static "game/image/icons/load.svg" %}">
                <span>{% trans "Load" %}</span>
              </button>
            </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 new level. Enter a name below and hit save. Alternatively click on an existing level to update it." %}</p>
            <p>{% trans "To play your level and be tracked, first <b>Quit</b> the Level Editor and select your level from the 'Levels created by you' section." %}</p>

            <div class="table_control_div">
              <div class="scrolling-table-wrapper">
                <table width='100%' id="saveLevelTableHeader">
                  <thead>
                    <tr>
                      <th>{% trans "Name" %}</th>
                      <th>{% trans "Owner" %}</th>
                    </tr>
                  </thead>
                </table>
                <div class="scrolling-table">
                  <table width='100%' id="saveLevelTable">
                    <tbody></tbody>
                  </table>
                </div>
              </div>
              <br style="clear:both">
              <div>
                <label>{% trans "Name:" %}</label>
                <input type="text" id="levelNameInput">
              </div>
            </div>
            <br>
            <br>
            <button class="navigation_button long_button" id="saveLevel">
              <img src="{% static "game/image/icons/save.svg" %}">
              <span>{% trans "Save" %}</span>
            </button>
          </div>

          <div id="share_pane" class="tab_pane">
            <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/share.svg" %}'>{% trans "Share" %}</h2>

            {% if user|get_user_status == 'TEACHER' %}
              <p>{% trans "Here you can share your level with your classes or your fellow teachers." %}</p>
            {% elif user|get_user_status == 'SCHOOL_STUDENT' %}
              <p>{% trans "Here you can share your level with your classmates. Try clicking in the Shared column!" %}</p>
            {% endif %}

            <div class="table_control_div">
              {% if user|get_user_status == 'TEACHER' %}
                <p>
                  {% trans "Share with:" %}
                  <select id="share_type_select">
                    <option value="classes" selected>{% trans "Classes" %}</option>
                    <option value="teachers">{% trans "Teachers" %}</option>
                  </select>
                </p>

                <p id="class_selection">
                  {% trans "Class:" %} <select id="class_select"></select>
                </p>
              {% endif %}

              <div id="shared_levels" class="scrolling-table-wrapper">
                <table width='100%' id="shareLevelTableHeader">
                  <thead>
                    <tr>
                      <th>{% trans "Name" %}</th>
                      <th>{% trans "Shared" %}</th>
                    </tr>
                  </thead>
                </table>
                <div class="scrolling-table">
                  <table width='100%' id="shareLevelTable">
                    <tbody></tbody>
                  </table>
                </div>
              </div>
            </div>

            <button class="navigation_button long_button" id="shareWithAll">
              <img src="{% static "game/image/icons/share.svg" %}">
              <span>{% trans "Share with all" %}</span>
            </button>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div id="paper"></div>

  <div id="trashcanHolder">
    <img id="trashcanLidClosed" src="{% static "game/image/trashcan_lid_closed.svg" %}">
    <img id="trashcanLidOpen" src="{% static "game/image/trashcan_lid_open.svg" %}">
    <img id="trashcan" src="{% static "game/image/trashcan.svg" %}">
  </div>
</div>

<div id="blockly"></div>
<xml id="blockly_toolbox"></xml>

{% endblock %}
