{% extends 'base.html' %}

{% block content %}
    
    <h3 class="text-gray-900">Edit gangarc</h3>
    <hr class="my-2">

        <form method="post">
        <div class="form-group">
            <label for="runfile" class="text-gray-900">Edit gangarc file.</label>
            <textarea class="form-control" data-editor="markdown" id="config" name="config-data" rows="20">{{ ganga_config }}</textarea>
        </div>
        <div class="d-flex justify-content-center">
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
    </form>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
    <script type="text/javascript">
    $('textarea[data-editor]').each(function() {
        var textarea = $(this);
        var mode = textarea.data('editor');
        var div = $('<div>', {
            'width': textarea.outerWidth(),
            'height': textarea.outerHeight(),
            'class': textarea.attr('class')
        }).insertBefore(textarea);
        textarea.hide();
        var editor = ace.edit(div[0]);
        var session = editor.getSession();
        editor.setTheme("ace/theme/monokai");
        session.setValue(textarea.val());
        session.setMode('ace/mode/' + mode);
        session.setNewLineMode('unix');
        session.setTabSize(4);
        session.setUseSoftTabs(true);
        session.setUseWrapMode(true);
        textarea.closest('form').submit(function() {
            textarea.val(editor.getSession().getValue());
        });
    });
    </script>
    
{% endblock content %}
