{% extends "templates/base.html" %}
{% from "www/macros/livecode.html" import LiveCodeEditorLarge, LiveCodeEditorJS with context %}

{% block title %}{{sketch.title}}{% endblock %}
{% block head_include %}
	<meta name="description" content="Sketch {{sketch.title}}" />
	<meta name="keywords" content="sketch {{sketch.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 %}
<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="/sketches">Sketches</a></li>
			</ol>
		</nav>

    <div class="sketch-header">
      {% if editable %}
      <div class="form-row">
        <div class="col-lg-8 col-md-6">
          <input type="text" id="sketch-title" name="title" class="form-control" value="{{ sketch.title }}">
        </div>
        <div class="col-lg-4 col-md-6">
          <button type="submit" id="sketch-save" class="btn-save btn btn-primary">Save</button>
        </div>
      </div>
      {% else %}
        <h1 class="sketch-title">{{sketch.title}}</h1>
        <div class="sketch-owner-wrapper">By <span class="sketch-owner">{{sketch.get_owner_name()}}</span></div>
      {% endif %}
    </div>

  {% if sketch.is_new() and not editable %}
    <div class="alert alert-warning">
      Please login to save this sketch.
    </div>
  {% endif %}

    <div class="sketch-editor">
      {{LiveCodeEditorLarge(sketch.name, sketch.code) }}
    </div>
{% endblock %}

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

  <script type="text/javascript">
    var sketch_name = {{ sketch.name | tojson }};

    function saveSketch() {
      var title = $("#sketch-title").val()
      var code = livecodeEditors[0].codemirror.doc.getValue()
      frappe.call('community.lms.doctype.lms_sketch.lms_sketch.save_sketch', {
        name: sketch_name,
        title: title,
        code: code
      })
      .then(r => {
        var msg = r.message;
        if (!msg.ok) {
          var error = msg.error || "Save failed."
          frappe.msgprint({
            "title": "Error",
            "indicator": "red",
            "message": error
          });
        }
        else if (msg.status == "created") {
          var path = "/sketches/sketch?sketch=" + msg.name;
          var url = window.location.protocol + "//" + window.location.host + path
          window.history.pushState({path: url}, '', url);
          sketch_name = name;

          frappe.msgprint({
            "title": "Notification",
            "indicator": "green",
            "message": "New sketch has been saved!"
          });
        }
        else if (msg.status == "updated") {
          frappe.msgprint({
            "title": "Notification",
            "indicator": "green",
            "message": "The sketch has been saved!"
          });
        }
      })
    }

    $(function() {
      $("#sketch-save").click(function() {
        saveSketch();
      });
    })
  </script>
{%- endblock %}