{% extends "base.html" %}

{% block head %}
<!-- dependencies -->
<link rel="StyleSheet" href="/style/flat.viewer.css" type="text/css" />
<script type="text/javascript" src="/style/flat.viewer.js"></script> 
{% endblock %}

{% block js %}
initialcorrectionset = '{{ initialcorrectionset }}';
{% endblock %}

{% block menu %}
{% include "viewermenu.html" %}
<li>Edit Annotations
<ul id="annotationseditviewmenu">
</ul>
</li>
<li>Edit Forms
<ul id="editforms">
    {% if configuration.alloweditformdirect %}
    <li id="editformdirect"><a href="javascript:toggleeditform('direct')">Direct Edit (D)</a></li>
    {% endif %}
    {% if configuration.alloweditformcorrection %}
    <li id="editformcorrection"><a href="javascript:toggleeditform('correction')">Edit as correction (C)</a></li>
    {% endif %}
    {% if configuration.alloweditformalternative %}
    <li id="editformalternative"><a href="javascript:toggleeditform('alternative')">Edit as alternative (A)</a></li>
    {% endif %}
    {% if configuration.alloweditformnew %}
    <li id="editformnew"><a href="javascript:toggleeditform('new')">Add as new (N)</a></li>
    {% endif %}
</ul>
</li>
<li>Tools &amp; Options
<ul id="toolsandoptions">
    {% if configuration.allowdeclare %}
    <li><a href="javascript:declare()">Add new Annotation Type</a></li>
    {% endif %}
    <li id="toggleannotatordetails"><a href="javascript:toggleannotatordetails()">Show annotator details</a></li>
    <li><a href="javascript:showhistory()">History &amp; Undo</a></li>
    <li id="toggleoriginal"><a href="javascript:toggleoriginal()">Show uncorrected text</a></li>
    <li><a href="javascript:openconsole()">Query Console</a></li>
    <li><a href="/download/{{ namespace }}/{{ docid }}.folia.xml">View FoLiA XML source</a></li>
</ul>
</li>
{% endblock %}

{% block dialogs %}
<div id="legend"></div>
<div id="editformcorrectionsetselector">
Correction set: <select id="editformcorrectionset"></select>
</div>
<div id="info"></div>
<div id="editor">
    <div id="editorheader">
        <span>Annotation Editor</span>
        <button id="editordiscard">x</button>
    </div>
    <div class="body">
    </div>
    <div class="buttoncontainer">
        <span id="editoraddfields">New:
        <select id="editoraddablefields">
        </select>
        <button id="editoraddfield">+</button></span>
    </div>
    <div class="buttoncontainer">
        <div id="openinconsolecontainer">
            <input id="openinconsole" type="checkbox" /> Delegate to console
        </div>
        <button id="editorsubmit">Ok</button>
    </div>
</div>
<div id="newdeclaration" class="dialog">
    <div id="newdeclarationheader">
        <span>Declare New Annotation Type</span>
        <button id="newdeclarationdiscard">x</button>
    </div>
    <label>Annotation Type:</label> <select id="newdeclarationannotationtype"></select><br />
    <label>Set: </label> <input id="newdeclarationset" /> 
    <div class="buttoncontainer">
        <input id="newdeclarationsubmit" type="submit" value="Add declaration" class="button" />
    </div>
</div>
<div id="history" class="dialog">
    <div id="historyheader">
        <span>History</span>
        <button id="historydiscard">x</button>
    </div>
    <div id="historybody">
    </div>
</div>
<div id="console" class="dialog">
    <div id="consoleheader">
        <span>Query Console</span>
        <button id="consolediscard">x</button>
    </div>
    <div id="consolebody">
        Queries in FoLiA Query Language: <button onclick="$('#queryinput').val('');">Clear</button><br />
        <textarea id="queryinput"></textarea>

        <div class="buttoncontainer">
            <button id="consolesubmit">Ok</button>
        </div>
    </div>
</div>
{% endblock %}

{% block main %}
<div id="document">
{{ dochtml|safe }}
</div>
{% endblock %}