<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <!-- jsoneditor -->
    <!--<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="jsoneditor/jsoneditor.css") }}">-->
    <script type="text/javascript" src="{{ url_for('static', filename="jsoneditor/jsoneditor.js") }}"></script>

    <!-- ace code editor -->
    <script type="text/javascript" src="{{ url_for('static', filename="jsoneditor/ace.js") }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename="jsoneditor/mode-json.js") }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename="jsoneditor/theme-textmate.js") }}"></script>
    <!--<script type="text/javascript" src="{{ url_for('static', filename="jsoneditor/theme-jsoneditor.js") }}"></script>-->

    <!-- json lint -->
    <!--<script type="text/javascript" src="{{ url_for('static', filename="jsoneditor/jsonlint.js") }}"></script>-->

    <style type="text/css">
        body {
            font: 10.5pt arial;
            color: #4d4d4d;
            line-height: 150%;
            margin: 0;
        }

        code {
            background-color: #f5f5f5;
        }

        #editor_holder {
            width: 100%;
            height: 800px;
        }

        .container {
            width: 600px;
            margin: 50px auto 0 auto;
        }
    </style>
</head>
<body>
	<div class="container">
	    <div id="editor_holder"></div>
	</div>
	<script type="text/javascript" >
		var container = document.getElementById('editor_holder');
		var json = {{ jsondata|safe }};
		var jsonschema = {{ jsonchema|safe }};
		var options = {
			mode: 'tree',
			modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes

			error: function (err) {
				alert(err.toString());
			},
			schema: jsonschema
			};

		var editor = new JSONEditor(container, options);
		editor.setValue(json);
	</script>
</body>
</html>
