{% extends "home/base.html" %}

{% block content %}

<!--<script src="lib/codemirror.js"></script>-->
<!--<link rel="stylesheet" href="lib/codemirror.css">-->
<!--<script src="mode/javascript/javascript.js"></script>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.css" integrity="sha512-xIf9AdJauwKIVtrVRZ0i4nHP61Ogx9fSRAkCLecmE2dL/U8ioWpDvFCAy4dcfecN72HHB9+7FfQj3aiO68aaaw==" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/dialog/dialog.min.css" integrity="sha512-Vogm+Cii1SXP5oxWQyPdkA91rHB776209ZVvX4C/i4ypcfBlWVRXZGodoTDAyyZvO36JlTqDqkMhVKAYc7CMjQ==" crossorigin="anonymous" />

<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/ayu-dark.min.css" integrity="sha512-3/qeNGuMFHa3JQVnHybYEdUbc0ktOoIqqkNiF+UpjroQ0StzmwFvMtEWL6Bt+9SUF6xgYYeW29x3SXC07MwvDw==" crossorigin="anonymous" />-->

<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/midnight.min.css" integrity="sha512-ZTF0X2l7PXEFDyP+MSOK0QM3Qh+C+lQ70Tqx4vQb3+6Uxh2lYkwmbSbpDmksZaX8w0sSz8ctVBnPSzAR1TQlzA==" crossorigin="anonymous" />-->

<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/solarized.min.css" integrity="sha512-9eh7EKENNB3CJcWthLysOUEcOw1hCVES0IoNcgLeKRgcG1j1HRNXST3b1i7SV/XQEFGAvg7RMm5XbHfdaA0juQ==" crossorigin="anonymous" />-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/material-palenight.min.css" integrity="sha512-WcJFeiToPv3ZknO2qXQq505rxYSisraahZ9mdI04HHdx0x7nhr7VP4thoY1ub2GTYiVUEUpy+8tJ+kpgz8pt+A==" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.js" integrity="sha512-WWC1A/JchDFZ2ZGaNyMC7CmPFXGLI/6Ih7WN6YG0DX1NGMkW5lqCVFxCmEx3e56Z7iqdQGpO0f+m2t9CJhdb2Q==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/python/python.min.js" integrity="sha512-DS+asaww1mE0V/N6YGVgoNIRj+yXB9hAV68vM6rVeWs0G+OyMd24LKrnS4Z+g26rgghU7qvGeEnRVUArV7nVog==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/dialog/dialog.min.js" integrity="sha512-YU8ue8QADzIU/tOodVSM+D74vp1FICLl737eY54IbYYuu+ZsG/JEoZFgfUGOXWWyp3lo02wKTnPHrroWRy+Fgg==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/search/searchcursor.min.js" integrity="sha512-DVIRH6DkN3F/ZpyO69rw0Z4v2KmSXzt281MckBasGKgKfLSi2n4n5L0SByrLFZzZP1cunvJY8xkjhtZKk9k8HA==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/edit/matchbrackets.min.js" integrity="sha512-zgTUY40c9HFb3Kr25lTW3gpnSt+xVc0yWPYwa6Yu7kChiaOHfNlyA4bM8Y3YLzjeQfrNFy40UcbOE/Cmmb29nQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/keymap/vim.min.js" integrity="sha512-iisxvAO2iQQD52++It/lOo+oBpZT/S7j3NevR7Vp0317oGVv48FoEr2/yLqt8CcJmSrnzvM9Cu7EIR/jYhYp+A==" crossorigin="anonymous"></script>

<!--<script>-->
  <!--CodeMirror.commands.save = function(){ alert("Saving"); };-->
  <!--var editor = CodeMirror.fromTextArea(document.getElementById("code"), {-->
    <!--lineNumbers: true,-->
    <!--mode: "text/x-csrc",-->
    <!--keyMap: "vim",-->
    <!--matchBrackets: true,-->
    <!--showCursorWhenSelecting: true-->
  <!--});-->
  <!--var commandDisplay = document.getElementById('command-display');-->
  <!--var keys = '';-->
  <!--CodeMirror.on(editor, 'vim-keypress', function(key) {-->
    <!--keys = keys + key;-->
    <!--commandDisplay.innerText = keys;-->
  <!--});-->
  <!--CodeMirror.on(editor, 'vim-command-done', function(e) {-->
    <!--keys = '';-->
    <!--commandDisplay.innerHTML = keys;-->
  <!--});-->
  <!--var vimMode = document.getElementById('vim-mode');-->
  <!--CodeMirror.on(editor, 'vim-mode-change', function(e) {-->
    <!--vimMode.innerText = JSON.stringify(e);-->
  <!--});-->
<!--</script>-->

<!--<form><textarea id="code" name="code">-->
<!--#include "syscalls.h"-->
<!--/* getchar:  simple buffered version */-->
<!--int getchar(void)-->
<!--{-->
  <!--static char buf[BUFSIZ];-->
  <!--static char *bufp = buf;-->
  <!--static int n = 0;-->
  <!--if (n == 0) {  /* buffer is empty */-->
    <!--n = read(0, buf, sizeof buf);-->
    <!--bufp = buf;-->
  <!--}-->
  <!--return (--n >= 0) ? (unsigned char) *bufp++ : EOF;-->
<!--}-->
<!--</textarea></form>-->

<!--<script>-->
<!--var myCodeMirror = CodeMirror(document.body);-->
<!--var myCodeMirror = CodeMirror(document.body, {-->
  <!--value: "function myScript(){return 100;}\n",-->
  <!--mode:  "javascript"-->
<!--});-->
<!--</script>-->

<!--<body>-->
    <!--<p> salut </p>-->
<!--</body>-->

<!--<script>-->
<!--CodeMirror.commands.save = function () {-->
    <!--alert("Saving");-->
<!--};-->
<!--var editor = CodeMirror.fromTextArea(document.getElementById("code"), {-->
    <!--lineNumbers: true,-->
    <!--mode: "text/x-csrc",-->
    <!--keyMap: "vim",-->
    <!--showCursorWhenSelecting: true-->
<!--});-->
<!--</script>-->

<form>
    <textarea id="code" name="code"></textarea>
</form>
<div class="container">
    <div style="font-size: 13px; width: 300px; height: 30px;">Key buffer: <span id="command-display"></span></div>
    <div style="font-size: 13px; width: 300px; height: 30px;">Vim mode: <span id="vim-mode"></span></div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">filename</span>
      </div>
      <input id="filename" type="text" class="form-control" placeholder="script.py" aria-label="script.py" aria-describedby="basic-addon1">
    </div>
</div>

<script>
function saveTextAsFile() {
  var textToWrite = editor.getValue();
  var textFileAsBlob = new Blob([textToWrite], {
    type: "text/plain;charset=utf-8"
  });
  var fileNameToSaveAs = document.getElementById('filename').value || "script.py";

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.webkitURL != null) {
    // Chrome allows the link to be clicked
    // without actually adding it to the DOM.
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
  } else {
    // Firefox requires the link to be added to the DOM
    // before it can be clicked.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
  }

  downloadLink.click();
}
</script>

<script>
  CodeMirror.commands.save = saveTextAsFile;
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    theme: "material-palenight",
    lineNumbers: true,
    mode: "text/x-python",
    keyMap: "vim",
    matchBrackets: true,
    showCursorWhenSelecting: true
  });
  var commandDisplay = document.getElementById('command-display');
  var keys = '';
  CodeMirror.on(editor, 'vim-keypress', function(key) {
    keys = keys + key;
    commandDisplay.innerText = keys;
  });
  CodeMirror.on(editor, 'vim-command-done', function(e) {
    keys = '';
    commandDisplay.innerHTML = keys;
  });
  var vimMode = document.getElementById('vim-mode');
  CodeMirror.on(editor, 'vim-mode-change', function(e) {
    vimMode.innerText = JSON.stringify(e);
  });
</script>


{% endblock content%}