{% load spirit_tags i18n %}
{% load static from staticfiles %}

{% load_settings 'ST_UPLOAD_IMAGE_ENABLED' 'ST_UPLOAD_FILE_ENABLED' %}

<div class="comment-text js-box-preview-content" style="display:none;"></div>
<ul class="reply-markdown">
    <li><a class="js-box-bold" href="#" title="{% trans "Bold" %}"><i class="fa fa-bold"></i></a></li><!--
 --><li><a class="js-box-italic" href="#" title="{% trans "Italic" %}"><i class="fa fa-italic"></i></a></li><!--
 --><li><a class="js-box-list" href="#" title="{% trans "List" %}"><i class="fa fa-list"></i></a></li><!--
 --><li><a class="js-box-url" href="#" title="{% trans "URL" %}"><i class="fa fa-link"></i></a></li><!--
 --><li><a class="js-box-image" href="#" title="{% trans "Image" %}"><i class="fa fa-picture-o"></i></a></li><!--
 -->{% if st_settings.ST_UPLOAD_FILE_ENABLED %}<li>
        <a class="js-box-file" href="#" title="{% trans "File" %}"><i class="fa fa-file"></i></a>
    </li>{% endif %}<!--
 --><li><a class="js-box-poll" href="#" title="{% trans "Poll" %}"><i class="fa fa-bar-chart-o"></i></a></li><!--
 --><li><a class="js-box-preview" href="#" title="{% trans "Preview" %}"><i class="fa fa-eye"></i></a></li>
</ul>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        marked.setOptions({
            renderer: new marked.Renderer(),
            gfm: true,
            tables: false,
            breaks: true,
            pedantic: false,
            sanitize: true,
            smartLists: false,
            smartypants: false
        });

        (function () {
            var editorElms = document.querySelectorAll('.js-reply');

            {% if st_settings.ST_UPLOAD_IMAGE_ENABLED %}
                stModules.editorImageUpload(editorElms, {
                    csrfToken: "{{ csrf_token }}",
                    target: "{% url "spirit:comment:image-upload-ajax" %}",
                    placeholderText: "{% trans "uploading {name}" %}",
                    allowedFileMedia: "{% get_allowed_image_types %}"
                });
            {% endif %}

            {% if st_settings.ST_UPLOAD_FILE_ENABLED %}
                stModules.editorFileUpload(editorElms, {
                    csrfToken: "{{ csrf_token }}",
                    target: "{% url "spirit:comment:file-upload-ajax" %}",
                    placeholderText: "{% trans "uploading {name}" %}",
                    allowedFileMedia: "{% get_allowed_file_types %}"
                });
            {% endif %}

            stModules.editor(editorElms, {
                boldedText: "{% trans "bolded text" %}",
                italicisedText: "{% trans "italicised text" %}",
                listItemText: "{% trans "list item" %}",
                linkText: "{% trans "link text" %}",
                linkUrlText: "{% trans "link url" %}",
                imageText: "{% trans "image text" %}",
                imageUrlText: "{% trans "image url" %}",
                fileText: "{% trans "file text" %}",
                fileUrlText: "{% trans "file url" %}",
                pollTitleText: "{% trans "Title" %}",
                pollChoiceText: "{% trans "Description" %}"
            });

            var editor = new Textcomplete.editors.Textarea(
                document.querySelector('.js-reply').querySelector('textarea'));
            var textcomplete = new Textcomplete(editor, {
                dropdown: {className: 'textcomplete', maxCount: 5}});
            textcomplete.register([{
                match: /(^|\s):([a-z0-9+\-\_]*)$/,
                search: function (term, callback) {
                    callback(stModules.emojiList.filter(function (emoji) {
                        return emoji.startsWith(term);
                    }));
                },
                replace: function (value) {
                    return '$1:' + value + ': ';
                },
                template: function (name) {
                    var clsName = name
                        .split('_').join('-')
                        .split('+').join('plus');
                    return "<li><i class=\"tw tw-" + clsName + "\"></i> " + name + "</li>"
                }
            }]);
            textcomplete.on('rendered', function () {
                // Auto select first item
                textcomplete.dropdown.items[0].activate();
            });
        })();

	});
</script>
