{% if comments %}
  <div id="comment-list">
    {% for comment in comments %}
      <hr/>
      <div id="{{ comment.id }}" class="comment-container">
        <div class="comment-header">
          {{ comment_credit(comment) }}
          {% if current_user.is_authenticated and current_user == comment.user %}
            <a href="{{ url_for('comment.delete', id=comment.id) }}"
               class="btn btn-danger btn-xs"
               title="{{ _('Delete this comment') }}">
                <span class="glyphicon glyphicon-trash"></span>
            </a>
            <button class="comment-edit-button btn btn-primary btn-xs"
                    title="{{ _('Edit this comment') }}">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
          {% endif %}
          <span style="float:right;">
            <small><em class="text-muted"> {{comment.created | date}} </em></small>
          </span>
        </div>
        <div class="comment-content">
          <div class="comment-content-html">
            {{ comment.text_html|safe }}
          </div>
          <p class="comment-content-mark" style="display: none;">{{ comment.last_revision.text }}</p>
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}

{% if current_user.is_authenticated %}
  <hr/>
  <div id="comment-add-form">
    <form method="POST" class="form-horizontal" role="form" action="{{ url_for('comment.create') }}">
      <div class="form-group">
        {{ comment_form.hidden_tag() }}
        {{ comment_form.text(class="comment-text") }}
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">{{ _('Add comment') }}</button>
      </div>
    </form>
  </div>
{% endif %}


{% block scripts %}
<link rel="stylesheet" href="{{ get_static_path('wysiwyg-editor.css') }}"/>
  <script src="{{ get_static_path('wysiwyg-editor.js') }}"></script>
  <script>
    $(document).ready(function() {
      commentMdes = {};
      commentMdes["commentAddForm"] = new EasyMDE({
        element: $("#comment-add-form").find(".comment-text")[0],
        spellChecker: false
      });

      $(".comment-edit-button").click(function() {
        let commentDiv = $(this).closest(".comment-container"),
            commentDivId = commentDiv.attr("id");

        let commentUpdateForm = commentDiv.find(".comment-update-form");
        if (commentUpdateForm.length === 0) {
            // update button is clicked first time for this comment,
            // define new commentUpdateForm, and append it to comment div
            let commentUpdateFormHtml = $(`
              <br>
              <div class="comment-update-form" style="display: none;">
                <form method="POST" class="form-horizontal" role="form" action="{{ url_for('comment.edit', id='commentDivId') }}">
                  <div class="form-group">
                    {{ comment_form.hidden_tag() }}
                    {{ comment_form.text(class="comment-text") }}
                  </div>
                  <div class="form-group">
                    <button type="submit" class="btn btn-primary">{{ _('Update comment') }}</button>
                  </div>
                </form>
              </div>
            `.replace('commentDivId', commentDivId));
            commentDiv.append(commentUpdateFormHtml);
            commentUpdateForm = commentDiv.find(".comment-update-form");
        }
        commentUpdateForm.toggle();
        let commentText = commentUpdateForm.find(".comment-text")[0],
            commentContentDiv = commentDiv.find(".comment-content"),
            commentContentText = commentContentDiv.find(".comment-content-mark").text();

        // hide/show old comment text
        commentContentDiv.toggle();

        if (!commentMdes[commentDivId]) {
          // if no EasyMDE object is created for this comment, create it
          commentMdes[commentDivId] = new EasyMDE({
            element: commentText,
            spellChecker: false
          });
        }
        commentMdes[commentDivId].value(commentContentText);
      });
    });
  </script>
{% endblock %}