{% load i18n humanize dg_core dg_wiki %}{% comment %}
The comments on a page, oldest first, each with its replies, and the box for the next one; with who watches.
{% endcomment %}<section class="wk-comments" id="comments" data-upload-url="{% url 'dg_wiki:page_upload' page.path %}">
  <div class="wk-comments-head">
    <h2 class="h5 mb-0">{% translate "Comments" %}</h2>
    <form method="post" action="{% url 'dg_wiki:page_watch' page.path %}" class="ms-auto">
      {% csrf_token %}
      {% if request.user in watchers %}
        <input type="hidden" name="watching" value="no">
        <button type="submit" class="btn btn-sm btn-outline-secondary"><i class="bi bi-bell-slash"></i> {% translate "Stop watching" %}</button>
      {% else %}
        <input type="hidden" name="watching" value="yes">
        <button type="submit" class="btn btn-sm btn-outline-secondary"><i class="bi bi-bell"></i> {% translate "Watch" %}</button>
      {% endif %}
    </form>
  </div>
  <p class="wk-muted small">
    {% if watchers %}{% translate "Watching:" %} {% for user in watchers %}{{ user|person_name }}{% if not forloop.last %}, {% endif %}{% endfor %}.{% endif %}
    {% translate "Watchers hear about new comments. Mention someone with @ to tell them." %}
  </p>

  {% for comment in comments %}
    <article class="wk-comment" id="comment-{{ comment.pk }}">
      {% include 'dg_wiki/_comment_head.html' with item=comment %}
      <div class="wk-prose wk-comment-body">{{ comment.body|wiki_markdown:page }}</div>
      <div class="wk-comment-actions">
        <details>
          <summary><i class="bi bi-reply"></i> {% translate "Reply" %}</summary>
          <form method="post" action="{% url 'dg_wiki:comment_create' page.path %}" class="dg-editor mt-2">
            {% csrf_token %}
            <input type="hidden" name="parent" value="{{ comment.pk }}">
            <textarea name="body" rows="3" data-markdown-editor="lazy" class="form-control"></textarea>
            <button type="submit" class="btn btn-sm btn-primary mt-2">{% translate "Reply" %}</button>
            <button type="button" class="btn btn-sm btn-link mt-2" data-dg-editor-cancel>{% translate "Cancel" %}</button>
          </form>
        </details>
        {% if comment.author == request.user %}{% include 'dg_wiki/_comment_edit.html' with item=comment %}{% endif %}
      </div>
      {% for reply in comment.replies.all %}
        <div class="wk-reply" id="comment-{{ reply.pk }}">
          {% include 'dg_wiki/_comment_head.html' with item=reply %}
          <div class="wk-prose wk-comment-body">{{ reply.body|wiki_markdown:page }}</div>
          {% if reply.author == request.user %}<div class="wk-comment-actions">{% include 'dg_wiki/_comment_edit.html' with item=reply %}</div>{% endif %}
        </div>
      {% endfor %}
    </article>
  {% endfor %}

  <form method="post" action="{% url 'dg_wiki:comment_create' page.path %}" class="dg-editor wk-comment-new">
    {% csrf_token %}
    {{ comment_form.body }}
    <button type="submit" class="btn btn-sm btn-primary mt-2">{% translate "Comment" %}</button>
  </form>
</section>