{%- def "buttons" %}
        <div class="btn-group ${class}">
        {%- for button in buttons %}
            {%- if button == '|' %}
            </div><div class="btn-group ${class}">
            {%- elif button in ['b', 'bold'] %}
            <a class="btn btn-default btn-sm fa fa-bold" data-wysihtml5-command="bold" title="ctrl+B" tabindex="-1">

            </a>
            {%- elif button in ['i', 'italic'] %}
            <a class="btn btn-default btn-sm fa fa-italic" data-wysihtml5-command="italic" title="ctrl+I" tabindex="-1">

            </a>
            {%- elif button in ['u', 'underline'] %}
            <a class="btn btn-default btn-sm fa fa-underline" data-wysihtml5-command="underline" title="ctrl+U" tabindex="-1">

            </a>
            {%- elif button in ['s', 'strike'] %}
            <a class="btn btn-default btn-sm fa fa-strikethrough" data-wysihtml5-command="strikeThrough" title="Strikethrough" tabindex="-1">

            </a>
            {% elif button in ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7'] %}
            <a class="btn btn-default btn-sm fa fa-header" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="${button}" title="Header level ${button.1}" tabindex="-1">
            ${button.1}
            </a>
            {%- elif button == 'ul' %}
            <a class="btn btn-default btn-sm fa fa-list-ul" data-wysihtml5-command="insertUnorderedList" title="Unordered list" tabindex="-1">

            </a>
            {%- elif button == 'ol' %}
            <a class="btn btn-default btn-sm fa fa-list-ol" data-wysihtml5-command="insertOrderedList" title="Ordered list" tabindex="-1">

            </a>
            {%- elif button == 'link' %}
            <a class="btn btn-default btn-sm fa fa-link" data-wysihtml5-command="createLink" title="Create link" tabindex="-1">

            </a>
            {%- elif button == 'image' %}
            <a class="btn btn-default btn-sm fa fa-picture-o" data-wysihtml5-command="insertImage" title="Insert image" tabindex="-1">

            </a>
            {% elif button == 'left' %}
            <a class="btn btn-default btn-sm fa fa-align-left" data-wysihtml5-command="justifyLeft" title="Justify left" tabindex="-1">

            </a>
            {% elif button == 'right' %}
            <a class="btn btn-default btn-sm fa fa-align-right" data-wysihtml5-command="justifyRight" title="Justify right" tabindex="-1">

            </a>
            {% elif button == 'center' %}
            <a class="btn btn-default btn-sm fa fa-align-center" data-wysihtml5-command="justifyCenter" title="Justify center" tabindex="-1">

            </a>
            {% elif button == 'justify' %}
            <a class="btn btn-default btn-sm fa fa-align-justify" data-wysihtml5-command="justifyFull" title="Justify" tabindex="-1">

            </a>
            {% elif button == 'quote' %}
            <a class="btn btn-default btn-sm fa fa-quote-left" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="blockquote" title="Quote" tabindex="-1">

            </a>
            {% elif button == 'view' %}
            <a class="btn btn-default btn-sm fa fa-code" data-wysihtml5-action="change_view" title="Switch to code view" tabindex="-1">

            </a>
            {% else %}
            <b>Unknown button</b>
            {%- endif %}
        {%- endfor %}
        </div>
{%- enddef %}
<div class="moya-editor moya-editor-fa">
    <div id="${widget_id}-toolbar" class="moya-editor-toolbar-fa">
        <div class="btn-toolbar">
            {% if rbuttons %}{% call "buttons" with buttons=rbuttons, class="pull-right" %}{% end %}
            {% if buttons %}{% call "buttons" with buttons=buttons, class="pull-left" %}{% end %}
        </div>
        <div class="moya-editor-dialog moya-editor-image-dialog" data-wysihtml5-dialog="insertImage" style="display:none;">

            <input class="form-control input-sm" data-wysihtml5-dialog-field="src" placeholder="Enter an image URL" class="text">

            <select class="form-control input-sm" data-wysihtml5-dialog-field="className">
                <option value="" selected="selected">align default</option>
                <option value="wysiwyg-float-left">align left</option>
                <option value="wysiwyg-float-right">align right</option>
            </select>

            <div class="moya-editor-link-dialog-buttons">
                <a class="btn btn-success btn-sm" data-wysihtml5-dialog-action="save">OK</a>
                <a class="btn btn-default btn-sm" data-wysihtml5-dialog-action="cancel">Cancel</a>
            </div>
        </div>
        <div class="moya-editor-dialog moya-editor-link-dialog" data-wysihtml5-dialog="createLink" style="display:none;">
            <input class="form-control input-sm" data-wysihtml5-dialog-field="href" value="http://" class="text" placeholder="Enter a URL">
            <div class="moya-editor-link-dialog-buttons">
                <a class="btn btn-success btn-sm" data-wysihtml5-dialog-action="save">OK</a>
                <a class="btn btn-default btn-sm" data-wysihtml5-dialog-action="cancel">Cancel</a>
            </div>
        </div>
    </div>
    <textarea id="${widget_id}" class="moya-editor-textarea form-control ${field.class}" name="${name or field.name}" rows="${rows}">${field.value or ''}</textarea>
</div>
