{% comment %}
  An issue's comments and events, plus the comment form. Needs `issue`, `thread`, `timeline`,
  `project`, `access`, `focus`, `error`, `draft`. This whole element is what HTMX swaps.
{% endcomment %}
<div id="timeline" tabindex="-1"{% if focus == "timeline" %} data-autofocus{% endif %}>
  {% if timeline %}
    <ol class="timeline">
      {% for kind, item in timeline %}
        <li>
          {% if kind == "comment" %}
            {% include "comments/_comment.html" with c=item %}
          {% else %}
            {% include "issues/_event.html" with e=item %}
          {% endif %}
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="muted">No comments yet.</p>
  {% endif %}

  {% if error %}<p role="alert"><strong>Error:</strong> {{ error }}</p>{% endif %}
  {% if access.can_contribute %}
    {% url 'comments:reply' org_slug=project.org.slug project_slug=project.slug thread_id=thread.pk as reply_url %}
    <form method="post" action="{{ reply_url }}" hx-post="{{ reply_url }}" hx-target="#timeline" hx-swap="outerHTML">
      {% csrf_token %}
      <label for="new-comment">Add a comment</label>
      <textarea id="new-comment" name="body" rows="5" required>{{ draft }}</textarea>
      <p class="muted">Markdown.</p>
      <button type="submit">Comment</button>
    </form>
  {% elif not user.is_authenticated and project.open_contribution %}
    <p><a href="{% url 'account_login' %}?next={{ request.path|urlencode }}">Sign in</a> to join the discussion.</p>
  {% endif %}
</div>