59 lines
3.8 KiB
HTML
59 lines
3.8 KiB
HTML
{% 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> |