{% extends "base.html" %}

{% load staticfiles %}

{% block head_block %}
  	{{ block.super }}


    <!-- Codemirror core CSS -->
    <link rel="stylesheet" href="/static/bower_components/codemirror/lib/codemirror.css" >
    <link rel="stylesheet" href="/static/bower_components/codemirror/addon/fold/foldgutter.css"  />
    <link rel="stylesheet" href="/static/bower_components/codemirror/theme/neat.css" >
    <link rel="stylesheet" href="/static/bower_components/codemirror/addon/dialog/dialog.css" >
    <link rel="stylesheet" href="/static/bower_components/codemirror/addon/display/fullscreen.css" >

{% endblock %}




{% block content_body %}
  	{{ block.super }}
<div class="row">
    <div class="col-md-12">
    <div class="nav-tabs-custom" style="position: relative;">
    <ul class="nav nav-tabs" >
        {% block tab_pane_button_list %}

        {% endblock %}

        {% block nav_buttons_list %}

        {% endblock %}

    </ul>
        <div class="alert alert-success" id="success-alert" style="position: absolute; z-index: 100; top: 44px; left: 0;
    width: 100%;
    border-radius: 1px;
    background-color: rgba(0, 166, 90, 0.8) !important;
    text-align: center;
    border-color: rgba(0, 141, 76, 0.4);" hidden>
            <button type="button" class="close" onclick="$('#success-alert').toggle()">x</button>
            <strong>Success! </strong>
            Descriptor updated!
        </div>
    <div class="tab-content">
        {% block tab_pane_list %}

        {% endblock %}
    </div>
    <!-- /.tab-content -->




</div>

    </div>
</div>
{% endblock %}

{% block resource_block %}
  	{{ block.super }}


    <script src="/static/bower_components/codemirror/lib/codemirror.js" ></script>
    <script src="/static/bower_components/codemirror/addon/fold/foldcode.js" ></script>
    <script src="/static/bower_components/codemirror/addon/fold/foldgutter.js" ></script>
    <script src="/static/bower_components/codemirror/addon/fold/brace-fold.js" ></script>
    <script src="/static/bower_components/codemirror/mode/javascript/javascript.js" ></script>
    <script src="/static/bower_components/codemirror/mode/yaml/yaml.js" ></script>
    <script src="/static/bower_components/codemirror/mode/markdown/markdown.js" ></script>
    <script src="/static/bower_components/codemirror/addon/search/searchcursor.js" ></script>
    <script src="/static/bower_components/codemirror/addon/search/search.js" ></script>
    <script src="/static/bower_components/codemirror/addon/dialog/dialog.js" ></script>
    <script src="/static/bower_components/codemirror/addon/display/autorefresh.js" ></script>
    <script src="/static/bower_components/codemirror/addon/edit/matchbrackets.js" ></script>
    <script src="/static/bower_components/codemirror/addon/edit/closebrackets.js" ></script>
    <script src="/static/bower_components/codemirror/addon/display/fullscreen.js" ></script>
    <script src="/static/bower_components/codemirror/keymap/sublime.js" ></script>


    <script>

        var json_editor_settings = {
            mode: "javascript",
            showCursorWhenSelecting: true,
            autofocus: true,
            lineNumbers: true,
            lineWrapping: true,
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            autoCloseBrackets: true,
            matchBrackets: true,
            extraKeys: {
                "F11": function (cm) {
                    cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                },
                "Esc": function (cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                },
                "Ctrl-Q": function (cm) {
                    cm.foldCode(cm.getCursor());
                }
            },
            theme: "neat",
            keyMap: "sublime"
        };

        var yaml_editor_settings = {
            mode: "yaml",
            showCursorWhenSelecting: true,
            autofocus: true,
            autoRefresh: true,
            lineNumbers: true,
            lineWrapping: true,
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            autoCloseBrackets: true,
            matchBrackets: true,
            extraKeys: {
                "F11": function (cm) {
                    cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                },
                "Esc": function (cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                },
                "Ctrl-Q": function (cm) {
                    cm.foldCode(cm.getCursor());
                }
            },
            theme: "neat",
            keyMap: "sublime"
        };


        function goToGraph() {
            window.location.href = '/projects/graph?type={{descriptor_type}}&id={{descriptor_id}}'
        }
    </script>
{% endblock %}