{% load i18n %}
<div id="comment-section">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mt-4">
        <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between">
            <h5 class="text-lg font-bold text-temple-red mb-0">{% trans "Comments" %} ({{ comments.count }})</h5>
            {% if 'HX-Request' in request.headers %}
                <button type="button" class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-3 py-1.5 rounded-lg text-sm transition" hx-get="{% url 'meeting_details' meeting.slug %}" hx-select="#comment-section" hx-target="#comment-section">
                    <i data-lucide="x" class="w-4 h-4"></i> {% trans "Close" %}
                </button>
            {% endif %}
        </div>
        <div class="p-4">
            {% if comments %}
                <div class="space-y-3">
                    {% for comment in comments %}
                        <div class="bg-gray-50 rounded-xl overflow-hidden">
                            <div class="px-4 py-3 bg-white border-b border-gray-100 flex items-center justify-between">
                                <div>
                                    <strong class="text-gray-900">{{ comment.author.get_full_name|default:comment.author.username }}</strong>
                                    {% if comment.author != user %}
                                        <span class="inline-block ml-2 px-2 py-0.5 bg-gray-200 text-gray-600 text-xs rounded-full">{% trans "Comment" %}</span>
                                    {% endif %}
                                </div>
                                <small class="text-gray-500 text-sm">{{ comment.created_at|date:"M d, Y P" }}</small>
                            </div>
                            <div class="px-4 py-3">
                                <p class="text-gray-700 mb-0">{{ comment.content|safe }}</p>
                            </div>
                            <div class="px-4 py-2 bg-gray-50 border-t border-gray-100">
                                {% if comment.author == user or user.is_staff %}
                                    <div class="flex items-center gap-2">
                                        <button type="button" class="inline-flex items-center gap-1 px-3 py-1.5 border border-temple-red text-temple-red hover:bg-temple-red hover:text-white rounded-lg text-sm transition"
                                            hx-get="{% url 'edit_meeting_comment' meeting.slug comment.id %}"
                                            hx-target="#comment-section"
                                            title="Edit Comment">
                                            <i data-lucide="pencil" class="w-4 h-4"></i>
                                        </button>
                                        <button type="button" class="inline-flex items-center gap-1 px-3 py-1.5 border border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-lg text-sm transition"
                                            hx-get="{% url 'delete_meeting_comment' meeting.slug comment.id %}"
                                            hx-target="#comment-section"
                                            title="Delete Comment">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-gray-500 text-center py-4">{% trans "No comments yet. Be the first to comment!" %}</p>
            {% endif %}
        </div>
    </div>
</div>

<script>
    lucide.createIcons();
</script>