{% extends 'main/base.html' %}
{% load bootstrap3 %}

{% block content %}
    <script type="text/javascript">
        {% autoescape off %}
            function rbpmSetDefaultProject() {
                projectID = $("#selectProject").val();
                $.ajax({
                    url: '/api/configuration/set/current/' + projectID,
                    success: function (result) {
                        //window.rbpmEditor.setText(result.configs.content);
                        rbpmReadCurrentProject();
                    }
                })
            }
            function rbpmReReadConfiguration() {
                $.ajax({
                    url: '/api/configuration/get/current',
                    success: function (result) {
                        currentProjectID = result.configs.id;
                        $.ajax({
                            url: '/api/configuration/get/all',
                            success: function (result) {
                                $('#selectProject').empty();
                                $('#selectProject').append($('<option>', {
                                    value: '-1',
                                    text: '--- New Project ---'
                                }));
                                var content = '';
                                var name = '';
                                $.each(result.configs, function (i, val) {
                                    $('#selectProject').append($('<option>', {
                                        value: val.id,
                                        text: val.name
                                    }));
                                    if (currentProjectID === val.id) {
                                        content = val.content;
                                        name = val.name;
                                    }
                                });
                                $('#selectProject option[value=' + currentProjectID + ']').attr('selected', 'selected');
                                $('#rbpmFilename').val(name);
                                $('#rbpmFilename').prop('disabled', true);
                                //$('#configurationContent').val(content);
                                window.rbpmEditor.setText(content);
                            }
                        })
                    }
                })
            }
            function rbpmReadConfiguration(projectID) {
                $.ajax({
                    url: '/api/configuration/get/' + projectID,
                    success: function (result) {
                        console.log(result.configs.content)
                        window.rbpmEditor.setText(result.configs.content);
                    }
                })
            }
            $(document).ready(function () {
                $("#selectProject").change(function (val) {
                    console.log("Project Changed");
                    projectID = $("#selectProject").val();
                    console.log(projectID);
                    if (projectID >= 0) {
                        $('#rbpmFilename').prop('disabled', true);
                        rbpmReadConfiguration(projectID);
                    } else {
                        $('#rbpmFilename').val('');
                        $('#rbpmFilename').prop('disabled', false);
                    }
                });
                rbpmReReadConfiguration();
                var container = document.getElementById("jsoneditor");
                var options = {
                    'mode': 'code',
                    'modes': ['tree', 'code'],
                    'search': true,
                    'indentation': 4,
                };
                window.rbpmEditor = new JSONEditor(container, options);
            });

        {% endautoescape %}
    </script>
    <div class="form-group">
        <label class="control-label col-sm-2" for="environment">Select project:</label>
        <select id="selectProject" class="form-control disable-if-running" id="project">
            <option value="new_project">--- New Project ---</option>
        </select>
    </div>
    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
        <button id="rbpmConfigRefreshButton" type="button" class="btn btn-success disable-if-running"
                onclick="rbpmReReadConfiguration();">
            Re-read configuration files
        </button>
        <button id="rbpmSetDefaultButton" type="button" class="btn btn-primary disable-if-running" onclick="rbpmSetDefaultProject();">
            Set as default
        </button>
    </div>
    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
        <div class="pull-right">
            <button id="rbpmImportButton" type="button" class="btn btn-danger disable-if-running"
                    onclick="rbpmDeleteProject();">
                Delete
            </button>
        </div>
    </div>
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        <hr/>
    </div>
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        <label for="rbpmFilename">Filename:</label>
        <input type="text" id="rbpmFilename" class="form-control">
    </div>
    <div id="jsoneditor" class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="height: 800px;"></div>


    <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
        <button id="rbpmConfigApply" type="button" class="btn btn-success disable-if-running"
                onclick="rbpmConfigApply();">
            Apply
        </button>
    </div>
    <div class="col-md-10 col-lg-10 col-sm-10 col-xs-10"></div>
    <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
        <button id="rbpmConfigApply" type="button" class="btn btn-danger disable-if-running"
                onclick="rbpmConfigSaveAndApply();">
            Save and apply
        </button>
    </div>

{% endblock %}