{% extends "configure/configure.html" %}
{% block configure %}
    <script type="text/javascript" language="JavaScript" src="{{ url_for('static', filename='js/yaml.js') }}"></script>
    <script type="text/javascript" language="JavaScript" src="{{ url_for('static', filename='js/jsoneditor.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/jsoneditor.css') }}">
    <script type="text/javascript">
        $(function (){
            $('#name_input').hide();
        });
        function edit_name(){
            $('#name_label').replaceWith($('#name_input'));
            $('#name_input').show();
        }
	</script>


    <style type="text/css">
        textarea.config {
            background: #222;
            color: #fff;
            border: 5px solid #111;
            margin-bottom: 1em;
            -moz-border-radius: 0.4em;
            -khtml-border-radius: 0.4em;
        }
    </style>


    <form action="" method="post">
        <h2 id="name_label">
            {{ name }}
            <img onclick="edit_name()" src="{{ url_for('static', filename='img/fatcow-icons/16x16/script_edit.png') }}" alt="Edit Name">
        </h2>

        <h2 id="name_input"><input type="text" name="name" value="{{ name }}" style="font-size: 18px;"></h2>

        <p>Fully UI-based editing will be implemented later</p>

        <input type="checkbox" name="useJSONEditor" id="useJSONEditor" onchange="showhideJSONEditor(this.checked);" />Use JSONEditor<br />
        <textarea class="config" name="config" cols=80 rows=25 spellcheck="false" wrap="off" id="config">{{ config }}</textarea>
        <div id="editArea"></div>
        <div>
            <button type="submit" id="submit">Submit</button>
        </div>
        {% if related %}
            Related {{ root|other_type }}:
            {% for item in related %}
                <a href="{{ url_for('.edit_text', root=root|other_type, name=item) }}">{{ item }}</a>
            {% endfor %}
        {% endif %}
    </form>
	<script type="text/javascript">
        var container = document.getElementById("editArea");
        var editor = new JSONEditor(container,{change: getJSON, rootNodeName: '{{ name }}'},YAML.decode(document.getElementById('config').value));
        function getJSON() {
			var json = editor.get();
			document.getElementById('config').value = YAML.encode(json,200)
		}
		//document.getElementById('config').style.display = 'none';
		function showhideJSONEditor(val) {
			editor.set(YAML.decode(document.getElementById('config').value));
			if (val) {
				document.getElementById('editArea').style.display = '';
				document.getElementById('config').style.display = 'none';
			} else {
				document.getElementById('editArea').style.display = 'none';
				document.getElementById('config').style.display = '';
			}
		}
		showhideJSONEditor(document.getElementById("useJSONEditor").checked);
     </script>
{% endblock %}
