{% extends "templates/base.html" %}
{% block title %}{{topic.title}} ({{course.title}}){% endblock %}
{% block head_include %}
	<meta name="description" content="Topic {{topic.title}} of the course {{course.title}}" />
	<meta name="keywords" content="course {{course.title}} {{topic.title}}" />
	<style>
	</style>

<link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.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 %}
<section class="top-section" style="padding: 1rem 0rem;">
	<div class='container pb-5'>
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item" aria-current="page"><a href="/courses">Courses</a></li>
				<li class="breadcrumb-item" aria-current="page"><a href="/courses/course?course={{course.name}}">{{course.title}}</a></li>
			</ol>
		</nav>

		<h1>{{ topic.title }}</h1>

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

	</div>
</section>
{% endblock %}

{% macro render_section(s) %}
  {% if s.type == "text" %}
    {{ render_section_text(s) }}
  {% elif s.type == "code" %}
    {{ render_section_code(s) }}
  {% else %}
    <div>Unknown section type: {{s.type}}</div>
  {% endif %}
{% endmacro %}

{% macro render_section_text(s) %}
  {{ s.contents | markdown  }}
{% endmacro %}

{% macro render_section_code(s) %}
<div class="canvas-editor row no-gutters" id="editor-{{s.name}}">
  <div class="col-sm">
    <div class="heading">
      <button class="run">Run</button>
      <h2>Editor</h2>
    </div>
    <textarea class="code">{{s.code}}</textarea>
  </div>
  <div class="col-sm">
    <div class="heading">
      <h2>Output</h2>
    </div>
    <div class="canvas-wrapper">
      <canvas class="canvas" width="300" height="300">Dashed box</canvas>
      <pre class="output"></pre>
    </div>
    </pre>
  </div>
</div>
{% endmacro %}

{%- block script %}
  {{ super() }}
  <script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
  <script type="text/javascript">
    $(function() {
      $(".canvas-editor").each((i, e) => {
        var editor = new LiveCodeEditor(e, {
          runtime: "python-canvas",
          base_url: "{{ livecode_url }}",
          codemirror: true
        })
      })
    })
  </script>
{%- endblock %}

{%- block style %}
  {{ super() }}

<style type="text/css">

.canvas-wrapper {
  position: relative;
  padding: 10px;
}

.canvas-editor canvas {
  position: relative;
  z-index: 0;
  border: 1px solid #ddd;
  height: 300px;
  width: 300px;
}
.canvas-wrapper .output {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(255, 255, 255, 0);
  margin: 15px;
}

.canvas-editor .code {
  width: 100%;
  padding: 5px;
  min-height: 330px;
  resize: none;
}
.canvas-editor .output {
  padding: 5px;
}

.heading {
  background: #eee;
  padding: 10px;
  clear: both;
  color: #212529;
  border: 1px solid #ddd;
}

.canvas-editor h2 {
  font-size: 1.2em;
  text-transform: uppercase;
  margin: 0px;
  font-weight: normal;
}

.canvas-editor .run {
  float: right;
}

.canvas-editor .col-sm {
  border: 1px solid #ddd;
}

/* .canvas-editor canvas {
  float: left;
  border: 1px solid #ddd;
  padding: 5px;
  margin: 10px;
} */

</style>
{%- endblock %}