{% load staticfiles %}
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

        <link rel="stylesheet" type="text/css" href="{% static 'css/template_previewer/preview.css' %}" >

        <script type="text/javascript" src="{% static 'js/jquery-1.8.1.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery.json-2.3.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/dust-core-0.3.0.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/template_previewer/context.dust.js' %}"></script>
        <script type="text/javascript">
            var parse_url = "{% filter escapejs %}{% url parse %}{% endfilter %}";
        </script>
        <script type="text/javascript" src="{% static 'js/template_previewer/previewer.js' %}"></script>
    </head>
    <body>
        <div id="preview-ui">
            <p id="hide-preview"><a href="#">Template previewer ▾</a></p>
            <form method="post" action="{{ render_url }}" target="content-preview">
                {% csrf_token %}
                {{ form }}
                <button id="get-context" href="#">Update context</button><input type="submit" id="preview-submit" value="Preview">
            </form>
            <div id="context-tree">
                <p class="help">Enter a template name and click on "Update context"</p>
            </div>
        </div>
        <p id="show-preview"><a href="#">Template previewer ▸</a></p>
        <iframe id="content-preview" name="content-preview" sandbox="allow-scripts">
        </iframe>
    </body>
</html>

