form.html

{% extends 'base.html' %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='openccg.css') }}" />
    <script src="{{ url_for('static', filename='viz.js') }}"></script>
    <script src="{{ url_for('static', filename='lite.render.js') }}"></script>
    <script src="{{ url_for('static', filename='openccg.js') }}"></script>
    <script>
        function init() {
            document.getElementById('sentenceform').addEventListener('submit', handle_submit);
        }
        window.addEventListener('load', init);
    </script>
{% endblock head %}

{% block content %}
<div class="container">
    <form action="{{ url_for('openccg.parse') }}" method="POST" id="sentenceform">
        <fieldset>
            <legend>Sentence</legend>
            <div class="input-group fluid">
                <input type="text" name="sentence" value="Take the cup off the table." placeholder="Take the cup off the table." />
            </div>
            <div class="input-group">
                <label for="engine">Render engine</label>
                <select id="engine" name="engine">
                    <option value="svg">SVG</option>
                    <option value="img" selected>Image</option>
                    <option value="dot">Dot</option>
                    <option value="json">JSON</option>
                </select>
                <input type="submit" value="Go!" />
            </div>
        </fieldset>
    </form>
</div>

<div class="collapse">
    <input type="checkbox" id="result-section1" aria-hidden="true" />
    <label for="result-section1" aria-hidden="true">JSON response</label>
    <div>
        <pre id="response">
        {{ response or '' }}
        </pre>
    </div>

    <input type="checkbox" id="result-section2" checked aria-hidden="true" />
    <label for="result-section2" aria-hidden="true">Graphs</label>
    <div id="graphs" class="row">
    </div>
</div>
{% endblock content %}