ide.html

{% extends 'base.html' %}
{% load widget_tweaks %}
{% load static %}

{% block title %}
    <title>IDE - Schlangenprogrammiernacht 2018</title>
{% endblock %}

{% block css %}
  <link rel="stylesheet" type="text/css" href="{% static "ide/ide.css" %}" />
{% endblock %}

{% block content %}
<form id="snake_edit_form" method="post">
  {% csrf_token %}
  <textarea id="code" name="code">{{ snake.code }}</textarea>
</form>

<div id="ide" class="fullwindow">
  <div id="editor"></div>
  <div id="preview"></div>
  <div id="log"></div>
  <div id="tools">
    <div id="toolbar">
      <button id="bt_run" title="Ctrl+R">run</button>
      <button id="bt_restart">restart</button>
      <button id="bt_stop">stop</button>
      <button id="bt_save" title="Ctrl+S">save</button>
      <button id="bt_save_as" title="Ctrl+Shift+S">save as</button>
      <button id="bt_load" title="Ctrl+O">load</button>
      <button>preferences</button>
    </div>
  </div>
</div>

<div class="modal">
  <div id="safe_as_dialog">
    <header>save current version as</header>
    <div class="main">
      <label for="save_as_title">Title:</label>
      <input id="save_as_title">
    </div>
    <footer>
      <button class="bt_ok">Save</button>
      <button class="bt_cancel">Cancel</button>
    </footer>
  </div>
</div>

<div class="modal">
  <div id="load_dialog">
    <header>load previous version</header>
    <div class="main">
      <div class="list"></div>
    </div>
    <footer>
      <button class="bt_ok">Load</button>
      <button class="bt_cancel">Cancel</button>
    </footer>
  </div>
</div>

{% endblock %}

{% block js %}
<script type="text/javascript">
  let snake_title = "{{ snake.comment | default:"" }}";
  let snake_id = {{ snake.id | default:"null" }};
  let viewer_key = "{{ profile.viewer_key }}";
  let csrftoken = $("[name=csrfmiddlewaretoken]").val();
</script>
<script src="{% static "ide/ace/src-noconflict/ace.js" %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static "ide/ide.js" %}" type="text/javascript" charset="utf-8"></script>
{% include "visualization/js.html" %}
{% endblock %}