{% macro LiveCodeEditorLarge(name, code) %}
<div class="livecode-editor livecode-editor-large" id="editor-{{name}}">
  <div class="row">
    <div class="col-lg-8 col-md-6">
      <div class="controls">
        <button class="run">Run</button>
      </div>
    </div>
  </div>
  <div class="code-editor">
    <div class="row">
      <div class="col-lg-8 col-md-6">
        <div class="code-wrapper">
          <textarea class="code">{{code}}</textarea>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 canvas-wrapper">
          <canvas width="300" height="300"></canvas>
          <pre class="output"></pre>
      </div>
    </div>
  </div>
</div>
{% endmacro %}

{% macro LiveCodeEditor(name, code) %}
<div class="livecode-editor canvas-editor" id="editor-{{name}}"
    data-section="{{name}}">
  <div class="row">
    <div class="col-md-9">
    <div>
      <textarea class="code">{{code}}</textarea>
      <div class="livecode-controls">
        <button type="button" class="run">Run</button>
        <a href="javascript:;" class="reset">Reset</a>
        <a href="javascript:;" class="clear">Clear</a>
      </div>
    </div>
    </div>
    <div class="col-md-3">
      <div class="canvas-wrapper">
        <canvas class="canvas" width="150" height="150"></canvas>
        <pre class="output"></pre>
      </div>
    </div>
  </div>
</div>

{% endmacro %}



{% macro LiveCodeEditorJS(name, code) %}
<script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
<script type="text/javascript" src="/assets/community/js/livecode-canvas.js"></script>

<script type="text/javascript">
  var livecodeEditors = [];

  $(function() {
    $(".livecode-editor").each((i, e) => {
      var editor = new LiveCodeEditor(e, {
        base_url: "{{ livecode_url }}",
        ...getLiveCodeOptions()
      })
      livecodeEditors.push(editor);
    })
  })
</script>
{% endmacro %}