{% extends "templates/base.html" %}
{% from "www/macros/sidebar.html" import Sidebar %}
{% from "www/macros/livecode.html" import LiveCodeEditorJS, LiveCodeEditor with context %}
{% block title %}{{ lesson.title }}{% endblock %}

{% block head_include %}
	<meta name="description" content="{{lesson.title}} - {{course.title}}" />
	<meta name="keywords" content="{{lesson.title}} - {{course.title}}" />
	<style>
	</style>

<link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="/assets/css/lms.css">

<script src="{{ livecode_url }}/static/codemirror/lib/codemirror.js"></script>
<script src="{{ livecode_url }}/static/codemirror/mode/python/python.js"></script>
<script src="{{ livecode_url }}/static/codemirror/keymap/sublime.js"></script>

<script src="{{ livecode_url }}/static/codemirror/addon/edit/matchbrackets.js"></script>
<script src="{{ livecode_url }}/static/codemirror/addon/comment/comment.js"></script>
{% endblock %}


{% block content %}
{{ Sidebar(course.name, batch.name) }}

<div class="container">
  <div class="lesson-page">
    <div class="lesson-pagination">
      {% if prev_url %}
        <a href="{{prev_url}}" class="btn">&larr; Prev</a>
      {% endif %}
      {% if next_url %}
        <a href="{{next_url}}" class="btn pull-right">Next &rarr;</a>
      {% endif %}
    </div>

    <h2>{{ lesson.title }}</h2>

    {% for s in lesson.get_sections() %}
    <div class="section section-{{ s.type }}">
      {{ render_section(s) }}
    </div>
    {% endfor %}

    <div class="lesson-pagination">
      <a href="#" class="btn">&larr; Prev</a>
      <a href="#" class="btn pull-right">Next &rarr;</a>
    </div>
  </div>
</div>
{% endblock %}


{% macro render_section(s) %}
  {% if s.type == "text" %}
    {{ render_section_text(s) }}
  {% elif s.type == "example" or s.type == "code" or s.type == "exercise" %}
    {{ LiveCodeEditor(s.name, s.get_latest_code_for_user(), s.type=="exercise", "2 hours ago") }}
  {% else %}
    <div>Unknown section type: {{s.type}}</div>
  {% endif %}
{% endmacro %}

{% macro render_section_text(s) %}
  <div class="row">
    <div class="col-md-9">
      {{ frappe.utils.md_to_html(s.contents) }}
    </div>
  </div>
{% endmacro %}

{%- block script %}
  {{ super() }}
  {{ LiveCodeEditorJS() }}


  <!-- <script type="text/javascript">
    $(function() {
      var editorLookup = {};

      $(".canvas-editor").each((i, e) => {
        var data = $(e).data();
        var editor = new LiveCodeEditor(e, {
          runtime: "python-canvas",
          base_url: "{{ livecode_url }}",
          codemirror: true,
          userdata: data,
          autosave: function(editor, code) {
            // can't autosave when user is Guest
            if (frappe.session.user == "Guest") {
              return;
            }
            var data = editor.options.userdata;
            var code = editor.codemirror.doc.getValue();
            // console.log("autosaving...")
            frappe.call("community.lms.api.autosave_section", {
              section: data.section,
              code: code
            }).then((r) => {
              // TODO: verify
            })
          }
        })
        editorLookup[data.section] = editor;
      })

      $(".canvas-editor .reset").each((i, e) => {
        $(e).on("click", function(event) {
          var data = $(this).parents(".canvas-editor").data();
          var section = data.section;
          frappe.call("community.lms.api.get_section", {
            name: section
          }).then(r => {
            var editor = editorLookup[data.section];
            editor.codemirror.doc.setValue(r.message.contents);
          })
        })
      })
    })
  </script> -->
{%- endblock %}