<%! from django.utils.translation import ugettext as _ %>

<div class="wrapper-comp-editor" id="editor-tab">
<section class="problem-editor editor">
    <div class="row">
        %if enable_markdown:
        <div class="editor-bar">
            <ul class="format-buttons">
                <li><a href="#" class="header-button" data-tooltip='${_("Heading 1")}'><span
                        class="problem-editor-icon heading1"></span></a></li>
                <li><a href="#" class="multiple-choice-button" data-tooltip='${_("Multiple Choice")}'><span
                        class="problem-editor-icon multiple-choice"></span></a></li>
                <li><a href="#" class="checks-button" data-tooltip='${_("Checkboxes")}'><span
                        class="problem-editor-icon checks"></span></a></li>
                <li><a href="#" class="string-button" data-tooltip='${_("Text Input")}'><span
                        class="problem-editor-icon string"></span></a></li>
                <li><a href="#" class="number-button" data-tooltip='${_("Numerical Input")}'><span
                        class="problem-editor-icon number"></span></a></li>
                <li><a href="#" class="dropdown-button" data-tooltip='${_("Dropdown")}'><span
                        class="problem-editor-icon dropdown"></span></a></li>
                <li><a href="#" class="explanation-button" data-tooltip='${_("Explanation")}'><span
                        class="problem-editor-icon explanation"></span></a></li>
            </ul>
            <ul class="editor-tabs">
                <li><a href="#" class="xml-tab advanced-toggle" data-tab="xml">${_("Advanced Editor")}</a></li>
                <li><a href="#" class="cheatsheet-toggle" data-tooltip='${_("Toggle Cheatsheet")}'>?</a></li>
            </ul>
        </div>
        <textarea class="markdown-box">${markdown | h}</textarea>
        %endif
        <textarea class="xml-box" rows="8" cols="40">${data | h}</textarea>
    </div>
</section>

<script type="text/template" id="simple-editor-cheatsheet">
    <article class="simple-editor-cheatsheet">
        <div class="cheatsheet-wrapper">
            <div class="row">
                <h6>${_("Heading 1")}</h6>
                <div class="col sample heading-1">
                    <img src="/static/img/header-example.png" />
                </div>
                <div class="col">
<pre><code>H1
=====
</pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Multiple Choice")}</h6>
                <div class="col sample multiple-choice">
                    <img src="/static/img/choice-example.png" />
                </div>
                <div class="col">
<pre><code>( ) red
( ) green
(x) blue</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Checkboxes")}</h6>
                <div class="col sample check-multiple">
                    <img src="/static/img/multi-example.png" />
                </div>
                <div class="col">
<pre><code>[x] earth
[ ] wind
[x] water</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Text Input")}</h6>
                <div class="col sample string-response">
                    <img src="/static/img/string-example.png" />
                </div>
                <div class="col">
                    <pre><code>= dog</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Numerical Input")}</h6>
                <div class="col sample numerical-response">
                    <img src="/static/img/number-example.png" />
                </div>
                <div class="col">
                    <pre><code>= 3.14 +- 2%</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Dropdown")}</h6>
                <div class="col sample option-reponse">
                    <img src="/static/img/select-example.png" />
                </div>
                <div class="col">
                    <pre><code>[[wrong, (right)]]</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Explanation")}</h6>
                <div class="col sample explanation">
                    <img src="/static/img/explanation-example.png" />
                </div>
                <div class="col">
                    <pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
                </div>
            </div>
        </div>
    </article>
</script>
</div>
<%include file="metadata-edit.html" />
