{% load spirit_tags i18n %}
{% load static %}

{% load_settings 'ST_UPLOAD_IMAGE_ENABLED' 'ST_UPLOAD_FILE_ENABLED' %}

{% spaceless %}
  <ul class="comment__reply__actions__list">
    <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>
{% endspaceless %}

<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');
      var replyButtonElms = document.querySelectorAll('.js-reply-button');

      {% 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 %}

      var editors = stModules.editor(editorElms, {
        replyButtons: replyButtonElms,
        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>
