{% load i18n %}
{% load static %}
{% load django_decoupled_docs_tags %}

<div id="{{ field.auto_id }}_wrapper" class="EditMarkdownWidget form-group">
    {{ field.label_tag }}
    <div class="btn-toolbar" role="toolbar">
        <div class="btn-group">
            <a href="#" tabindex="-1" class="btn btn-default markdownH1" title='{% trans "Heading 1" %}'>h1</a>
            <a href="#" tabindex="-1" class="btn btn-default markdownH2" title='{% trans "Heading 2" %}'>h2</a>
            <a href="#" tabindex="-1" class="btn btn-default markdownH3" title='{% trans "Heading 3" %}'>h3</a>
        </div>
        <div class="btn-group">
            <a href="#" tabindex="-1" class="btn btn-default markdownBoldButton" title='{% trans "Bold" %}'><i class="fa fa-bold"></i></a>
            <a href="#" tabindex="-1" class="btn btn-default markdownItalicButton" title='{% trans "Italic" %}'><i class="fa fa-italic"></i></a>
            <a href="#" tabindex="-1" class="btn btn-default markdownUrlButton" title='{% trans "Insert link" %}'><i class="fa fa-link"></i></a>
        </div>
        <div class="btn-group">
            <a href="#" tabindex="-1" class="btn btn-default markdownBulletlistButton" title='{% trans "Unordered list" %}'><i class="fa fa-list-ul"></i></a>
            <a href="#" tabindex="-1" class="btn btn-default markdownNumberedlistButton" title='{% trans "Ordered list" %}'><i class="fa fa-list-ol"></i></a>
            <a href="#" tabindex="-1" class="btn btn-default markdownBlockquoteButton" title='{% trans "Blockquote" %}'><i class="fa fa-quote-left"></i></a>
        </div>
        <div class="btn-group">
            <a href="#" tabindex="-1" class="btn btn-default markdownCodeButton" title='{% trans "Programming code" %}'><i class="fa fa-code"></i></a>
            <a href="#" tabindex="-1" class="btn btn-default markdownMathBlockButton" title='{% trans "LaTeX mathematics" %}'>f(a)</a>
        </div>
        <div class="btn-group">
            <a href="{% decoupled_docs_url 'devilry_gradingsystem/markdown' %}"
                    tabindex="-1"
                    class="btn btn-default markdownHelp"
                    target='_blank',
                    title='{% trans "Help" %}'>
                <i class="fa fa-question"></i></a>
        </div>
    </div>
    <div id="{{ field.auto_id }}_aceeditor" class="AceEditor"></div>
    <textarea id="{{ field.auto_id }}" name="{{ field.name }}" rows="3"
        class="AceEditorTargetTextarea form-control">{% if field.value %}{{field.value}}{% endif %}</textarea>
</div>

<script src='{% static "devilry_gradingsystem/bower/bower_components/ace-builds/src-min-noconflict/ace.js" %}'></script>
<script src='{% static "devilry_gradingsystem/js/editmarkdown.js" %}'></script>
<script>
    new window.devilry_gradingsystem.EditMarkdownWidget({
        id: "{{ field.auto_id }}",
        translations: {
            "heading": '{% trans "Heading" %}',
            "programminglanguage": '{% trans "Programming language" %}'
        }
    });
</script>
