{% 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>
<style>
    {% if error %}
        .error{
            background-color: #bd2626;
            color: #f9f9f9;
            font-size: 17px;
            margin: 10px 0;
            padding: 10px;
            border-radius: 2px;
        }
    {% endif %}
</style>
{% endblock %}



{% block contenido %}
    <div class="row">
        <div class="col-md-7">
            
            <form method="post" action="." name="myForm">
                {% csrf_token %}
                <label class="control control-checkbox mb-1 mr-2">
                    <input type="checkbox" {% if not settings.DEBUG %}checked="checked"{% endif %} name="enable_try"> 
                    Deshabilitar excepciones
                    <span class="control_indicator"></span>
                </label>

                <textarea name="query" id="id_query" class="query-textarea">{{ query }}</textarea>

                <div class="text-right my-2">
                    <input type="submit" value="Ejecutar" class="btn btn-dark" id="ejecutar">
                </div>
            </form>
        </div>
        <div class="col-md-5">
            <div style="max-height:95vh;overflow:auto"> 
                {% if error %}
                <div class="error">{{ error }}</div>
                {% endif %}

                <div class="text-info text-center" style="padding: 10px 0">{{ objects|length }} objetos</div>

                <table class="table table-condensed">
                {% for object in objects %}
                    <tr>
                        <td>{{ object }}</td>
                    </tr>
                {% endfor%}
                </table>
            </div>
        </div>
    </div>

<script>
var h = window.outerHeight;

window.editor = CodeMirror.fromTextArea(document.getElementById("id_query"), {
    mode: {name: "python", singleLineStringErrors: false},
    lineNumbers: true,
    indentUnit: 4,
    matchBrackets: true,
    theme: 'monokai'
});

window.editor.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) {
    $("#ejecutar").click()
  }
});


window.editor.setSize(null, h - 250);
</script>
{% endblock %}
