{% extends 'sh/layout.html' %}
{% load static %}


{% block extra_head %}
<link rel="stylesheet" href="{% static 'sh/codemirror/lib/codemirror.css' %}">
<link rel="stylesheet" href="{% static 'sh/codemirror/theme/monokai.css' %}">
<script type="text/javascript" src="{% static 'sh/codemirror/lib/codemirror.js' %}"></script>
<script type="text/javascript" src="{% static 'sh/codemirror/mode/python/python.js' %}"></script>

{% endblock extra_head %}
	
{% block contenido %}
  <form action="." method="POST">
    {% csrf_token %}
	<div class="row mb-2">
		<div class="col-md-6">
			<div>Ejecutar antes del comando:</div>
			<textarea id="antes" name="antes" class="query-textarea">{{ configuracion.antes }}</textarea>
		</div>
		<div class="col-md-6">
			<div>Ejecutar después del comando:</div>
			<textarea id="despues" name="despues" class="query-textarea">{{ configuracion.despues }}</textarea>
		</div>
	</div>

	<div class="text-right">
		<input id="guardar" class="btn btn-sm btn-primary" type="submit" value="Guardar">
	</div>
  </form>

  <script>
	var h = window.outerHeight;
	
	window.editor_antes = CodeMirror.fromTextArea(document.getElementById("antes"), {
		mode: {name: "python", singleLineStringErrors: false},
		lineNumbers: true,
		indentUnit: 4,
		matchBrackets: true,
		theme: 'monokai'
	});
	
	window.editor_antes.on("keydown", function (cm, event) {
	  event = {
		type: "keydown",
		keyCode: event.keyCode,
		ctrlKey: event.ctrlKey,
		shiftKey: event.shiftKey,
		altKey: event.altKey,
		metaKey: event.metaKey
	  };
				
	  if (event.ctrlKey && event.keyCode == 13) {
		$("#guardar").click()
	  }
	});

	window.editor_despues = CodeMirror.fromTextArea(document.getElementById("despues"), {
		mode: {name: "python", singleLineStringErrors: false},
		lineNumbers: true,
		indentUnit: 4,
		matchBrackets: true,
		theme: 'monokai'
	});
	
	window.editor_despues.on("keydown", function (cm, event) {
	  event = {
		type: "keydown",
		keyCode: event.keyCode,
		ctrlKey: event.ctrlKey,
		shiftKey: event.shiftKey,
		altKey: event.altKey,
		metaKey: event.metaKey
	  };
				
	  if (event.ctrlKey && event.keyCode == 13) {
		$("#guardar").click()
	  }
	});
	
	
	window.editor_antes.setSize(null, h - 270);
	window.editor_despues.setSize(null, h - 270);
	</script>
	
  {% endblock %}
