<%! from django.utils.translation import ugettext as _ %>
<%namespace name='static' file='../static_content.html'/>

<% isLaTexProblem='source_code' in editable_metadata_fields and editable_metadata_fields['source_code']['explicitly_set'] and enable_latex_compiler %>

% if isLaTexProblem:
<div class="wrapper-comp-editor latex-problem" id="editor-tab">
% else:
<div class="wrapper-comp-editor" id="editor-tab">
% endif
<section class="problem-editor editor">
    <div class="row">
        %if enable_markdown:
        <div class="editor-bar">
            <ul class="format-buttons">
                <li>
                    <button type="button" class="header-button" data-tooltip="${_("Heading")}">
                        <span class="problem-editor-icon heading3">
                            <img class="icon" src="${static.url('images/cms-editor_heading.png')}" alt="${_("Insert a heading")}">
                        </span>
                    </button>
                </li>
                <li>
                    <button type="button" class="multiple-choice-button" data-tooltip="${_("Multiple Choice")}">
                        <span class="problem-editor-icon multiple-choice">
                            <img class="icon" src="${static.url('images/cms-editor_radio.png')}" alt="${_("Add a multiple choice question")}">
                        </span>
                    </button>
                </li>
                <li>
                    <button type="button" class="checks-button" data-tooltip="${_("Checkboxes")}">
                        <span class="problem-editor-icon checks">
                            <img class="icon" src="${static.url('images/cms-editor_checkbox.png')}" alt="${_("Add a question with checkboxes")}">
                        </span>
                    </button>
                </li>
                <li>
                    <button type="button" class="string-button" data-tooltip="${_("Text Input")}">
                        <span class="problem-editor-icon string">
                            <img class="icon" src="${static.url('images/cms-editor_text.png')}" alt="${_("Insert a text response")}">
                        </span>
                    </button>
                </li>
                <li>
                    <button type="button" class="number-button" data-tooltip="${_("Numerical Input")}">
                        <span class="problem-editor-icon number">
                            <img class="icon" src="${static.url('images/cms-editor_number.png')}" alt="${_("Insert a numerical response")}">
                        </span>
                    </button>
                </li>
                <li>
                    <button type="button" class="dropdown-button" data-tooltip="${_("Dropdown")}">
                        <span class="problem-editor-icon dropdown">
                            <img class="icon" src="${static.url('images/cms-editor_dropdown.png')}" alt="${_("Insert a dropdown response")}">
                        </span>
                    </button>
                </li>
                <li>
                    <button type="button" class="explanation-button" data-tooltip="${_("Explanation")}">
                        <span class="problem-editor-icon explanation">
                            <img class="icon" src="${static.url('images/cms-editor_explanation.png')}" alt="${_("Add an explanation for this question")}">
                        </span>
                    </button>
                </li>
            </ul>
            <ul class="editor-tabs">
                <li><button type="button" class="xml-tab advanced-toggle" data-tab="xml">${_("Advanced Editor")}</button></li>
                <li><button type="button" class="cheatsheet-toggle" data-tooltip="${_("Toggle Cheatsheet")}">?</button></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")}</h6>
                <div class="col sample heading-1">
                    <img class="icon" src="${static.url('images/cms-editor_heading.png')}" alt="${_("Insert a heading")}">
                </div>
                <div class="col">
<pre><code>H3
=====
</pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Multiple Choice")}</h6>
                <div class="col sample multiple-choice">
                    <img class="icon" src="${static.url('images/cms-editor_radio.png')}" alt="${_("Add a multiple choice question")}">
                </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 class="icon" src="${static.url('images/cms-editor_checkbox.png')}" alt="${_("Add a question with checkboxes")}">
                </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 class="icon" src="${static.url('images/cms-editor_text.png')}" alt="${_("Insert a text response")}">
                </div>
                <div class="col">
                    <pre><code>= dog
or= cat
or= mouse</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Numerical Input")}</h6>
                <div class="col sample numerical-response">
                    <img class="icon" src="${static.url('images/cms-editor_number.png')}" alt="${_("Insert a numerical response")}">
                </div>
                <div class="col">
                    <pre><code>= 3.14 +- 2%</code></pre>
                    <pre><code>= [3.14, 3.15)</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Dropdown")}</h6>
                <div class="col sample option-reponse">
                    <img class="icon" src="${static.url('images/cms-editor_dropdown.png')}" alt="${_("Insert a dropdown response")}">
                </div>
                <div class="col">
                    <pre><code>[[wrong, (right)]]</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Label")}</h6>
                <div class="col">
                    <pre><code>&gt;&gt;What is the capital of Argentina?&lt;&lt;</code></pre>
                </div>
            </div>
            <div class="row">
                <h6>${_("Explanation")}</h6>
                <div class="col sample explanation">
                    <img class="icon" src="${static.url('images/cms-editor_explanation.png')}" alt="${_("Add an explanation for this question")}">
                </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" />
