<div id="comment-section">
    <div class="card mt-4">
        <div class="card-header text-primary-theme d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Comments ({{ comments.count }})</h5>
            {% if 'HX-Request' in request.headers %}
                <button type="button" class="btn btn-light btn-sm" hx-get="{% url 'meeting_details' meeting.slug %}" hx-select="#comment-section" hx-target="#comment-section">
                    <i class="bi bi-x-lg"></i> Close
                </button>
            {% endif %}
        </div>
        <div class="card-body">
            {% if comments %}
                <div class="row">
                    {% for comment in comments %}
                        <div class="col-12 mb-3">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-start ">
                                    <div>
                                        <strong>{{ comment.author.get_full_name|default:comment.author.username }}</strong>
                                        {% if comment.author != user %}
                                            <span class="badge bg-secondary ms-2">Comment</span>
                                        {% endif %}
                                    </div>
                                    <small class="text-muted">{{ comment.created_at|date:"M d, Y P" }}</small>
                                </div>
                                <div class="card-body">
                                    <p class="card-text">{{ comment.content|safe }}</p>
                                </div>
                                <div class="card-footer">
                                    {% if comment.author == user or user.is_staff %}
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-outline-primary"
                                                hx-get="{% url 'edit_meeting_comment' meeting.slug comment.id %}"
                                                hx-target="#comment-section"
                                                title="Edit Comment">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button type="button" class="btn btn-outline-danger"
                                                hx-get="{% url 'delete_meeting_comment' meeting.slug comment.id %}"
                                                hx-target="#comment-section"
                                                title="Delete Comment">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-muted">No comments yet. Be the first to comment!</p>
            {% endif %}
        </div>
    </div>
</div>
