<!--
-
-
- Copyright (C) 2019 Xilinx, Inc.  All rights reserved.
-
- Permission is hereby granted, free of charge, to any person obtaining a copy of
- this software and associated documentation files (the "Software"), to deal in
- the Software without restriction, including without limitation the rights to
- use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
- of the Software, and to permit persons to whom the Software is furnished to do
- so, subject to the following conditions:
-
- The above copyright notice and this permission notice shall be included in all
- copies or substantial portions of the Software.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- AUTHORS OR COPYRIGHT HOLDERS  BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- SOFTWARE.
-
-
- Author: Michael Chyziak <chyziak@xilinx.com>
-
-->

{% extends "Default/default.html" %}
{% block content %}

<div class="page-header">
  <h1 class="display-4"><b>{% block title %}Editor{% endblock %} ("{{filename}}")</b></h1>
</div>

<div class="alert alert-success alert-dismissable" style="display: {{filesaved}}">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>File Saved.</strong>
</div>
<div class="alert alert-danger alert-dismissable" style="display: {{filemissing}}">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Could not find file.</strong>
</div>

<style type="text/css" media="screen">
  #editor {
    width: 100%;
    height: 50vh;
    min-height: 300px;
  }
</style>

<div class="modal fade" id="settingsModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
	<button type="button" class="close" data-dismiss="modal">&times;</button>
	<h4 class="modal-title">Editor Settings</h4>
      </div>
      <div class="modal-body">
	<div class="form-group">
	  <h3>Language</h3>	
	  <select class="form-control" id="language">
   	    <option>C/C++</option>         
	    <option>CSS</option>
	    <option>HTML</option>
	    <option>LaTeX</option>
	    <option>Makefile</option>
	    <option>Plain Text</option>
	    <option selected>Python</option>
	    <option>Tcl</option>
	    <option>Verilog</option>
	    <option>VHDL</option>
	  </select>
	  <h3>Theme</h3>	
	  <select class="form-control" id="theme">
	    <optgroup label="Light">
   	      <option>Eclipse</option>         
	      <option>TextMate</option>
	    </optgroup>
	    <optgroup label="Dark" selected>
	      <option>Cobalt</option>
	      <option>Terminal</option>
	      <option selected>Twilight</option>
	    </optgroup>
	  </select>
	  <h3>Editor Type</h3>	
	  <select class="form-control" id="editortype">
   	    <option selected>Default</option>         
	    <option>Vim</option>
	    <option>Emacs</option>
	  </select>

	</div>
	<div class="modal-footer">
          <button type="button" onclick="confirmSettings()" class="btn btn-default" data-dismiss="modal">Save</button>
	  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	</div>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" onclick="saveFile()">Save</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#settingsModal">Change Settings</button>
<a class="btn btn-primary" href="customcontent.html">Back</a>


<form id="editor_form" method="post">
  <input name="request" id="request" type="hidden">
  <input name="filename_form" id="filename_form" type="hidden">
  <input name="code" id="code" type="hidden">
</form>

<script>
  function saveFile(){
    var filename = "{{filename}}";
    var editor = ace.edit("editor");
    var code = editor.getValue();
    document.getElementById("request").value = "save";
    document.getElementById("filename_form").value = filename;
    document.getElementById("code").value = code;
    document.getElementById("editor_form").submit();
  }
</script>

<script>
  function confirmSettings(){
    var language = document.getElementById("language").value;
    var theme = document.getElementById("theme").value;
    var type = document.getElementById("editortype").value;
    var editor = ace.edit("editor");
    switch(language) {
      case "C/C++":
        editor.session.setMode("ace/mode/c_cpp"); break;
      case "CSS":
        editor.session.setMode("ace/mode/css"); break;
      case "HTML":
        editor.session.setMode("ace/mode/html"); break;
      case "LaTeX":
        editor.session.setMode("ace/mode/latex"); break;
      case "Makefile":
        editor.session.setMode("ace/mode/makefile"); break;
      case "Plain Text":
        editor.session.setMode("ace/mode/plain_text"); break;
      case "Tcl":
        editor.session.setMode("ace/mode/tcl"); break;
      case "Verilog":
        editor.session.setMode("ace/mode/verilog"); break;
      case "VHDL":
        editor.session.setMode("ace/mode/vhdl"); break;
      default:
        editor.session.setMode("ace/mode/python");
    }
    switch(theme) {
      case "Eclipse":
        editor.setTheme("ace/theme/eclipse"); break;
      case "TextMate":
        editor.setTheme("ace/theme/textmate"); break;
      case "Cobalt":
        editor.setTheme("ace/theme/cobalt"); break;
      case "Terminal":
        editor.setTheme("ace/theme/terminal"); break;
      default:
        editor.setTheme("ace/theme/twilight");
    }
    switch(type) {
      case "Vim":
        editor.setKeyboardHandler("ace/keyboard/vim"); break;
      case "Emacs":
        editor.setKeyboardHandler("ace/keyboard/emacs"); break;
      default:
        editor.setKeyboardHandler("");
    }

  }

   function setEditorMode(extension) {
    switch(extension) {
      case "c":
      case "cpp":
      case "ino":
        document.getElementById("language").value = "C/C++"; break;
      case "css":
        document.getElementById("language").value = "CSS"; break;
      case "html":
        document.getElementById("language").value = "HTML"; break;
      case "latex":
        document.getElementById("language").value = "LaTeX"; break;
      case "Makefile":
        document.getElementById("language").value = "C/C++"; break;
      case "py":
        document.getElementById("language").value = "Python"; break;
      case "tcl":
        document.getElementById("language").value = "TCL"; break;
      case "v":
        document.getElementById("language").value = "Verilog"; break;
      case "vhd":
        document.getElementById("language").value = "VHDL"; break;
      default:
        document.getElementById("language").value = "Plain Text"; break;
    }
   confirmSettings();
   }
</script>

<pre id="editor">
{{ code }}
</pre>

<script src="{{ url_for('static', filename='src-noconflict/ace.js') }}" type="text/javascript" charset="utf-8"></script>
<script>
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/twilight");
  editor.session.setMode("ace/mode/python");
  var sourcefilename = "{{filename}}";
  var fileNameExt = sourcefilename.split('.').pop();
  if (!fileNameExt) fileNameExt = sourcefilename;
  setEditorMode(fileNameExt);
</script>
{% endblock %}
