{% comment %}
Comments on a speaker plus the box to add one. Re-rendered on its own by SpeakerCommentView
and SpeakerCommentDeleteView, so it has to stand alone.
{% endcomment %}
<h6 class="text-muted text-uppercase small">Comments</h6>

{% for comment in comments %}
<div class="card mb-2">
  <div class="card-body p-2">
    <div class="d-flex justify-content-between align-items-start gap-2">
      <div class="min-w-0">
        <small class="text-muted">{{ comment.author_display }} &middot; {{ comment.createdon|date:"M j, Y" }}</small>
        <div style="white-space: pre-line;">{{ comment.body }}</div>
      </div>
      {% comment %}Mirrors SpeakerComment.can_be_deleted_by, which is what actually enforces this.{% endcomment %}
      {% if request.user == comment.user or request.user.is_superuser %}
      <button type="button" class="btn btn-sm btn-outline-danger"
              hx-post="{% url 'speaker_comment_delete' speaker.slug comment.pk %}"
              hx-target="#speaker-comments-block"
              hx-swap="innerHTML"
              data-confirm="Delete this comment? It can't be undone."
              data-confirm-title="Delete comment?"
              data-confirm-ok="Delete"
              data-confirm-variant="danger">
        <i class="bi bi-trash"></i>
      </button>
      {% endif %}
    </div>
  </div>
</div>
{% empty %}
<p class="text-muted small">No comments yet.</p>
{% endfor %}

<form hx-post="{% url 'speaker_comment' speaker.slug %}" hx-target="#speaker-comments-block" hx-swap="innerHTML" class="mb-3">
  {% csrf_token %}
  {{ comment_form.body }}
  {% if comment_form.body.errors %}<div class="text-danger small">{{ comment_form.body.errors|striptags }}</div>{% endif %}
  <div class="d-flex flex-wrap gap-2 align-items-center mt-2">
    <button type="submit" class="btn btn-sm btn-success text-dark"><i class="bi bi-chat-left-text"></i> Post comment</button>
  </div>
</form>