59 lines
3.5 KiB
HTML
59 lines
3.5 KiB
HTML
<div class="bg-white rounded-lg shadow-md border border-gray-200">
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-gray-900 flex items-center">
|
|
<svg class="w-5 h-5 text-orange-600 mr-2"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
|
|
</svg>
|
|
<span>Comments ({{ comments_count }})</span>
|
|
</h2>
|
|
<p class="text-sm text-gray-600 mt-1">View and moderate all comments.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="comments-list">
|
|
{% block comments %}
|
|
{% if comments.is_empty() %}
|
|
<div class="p-8 text-center">
|
|
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-8 h-8 text-gray-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No comments to display</h3>
|
|
<p class="text-gray-600">Content may have shifted due to recent updates or list is empty.</p>
|
|
</div>
|
|
{% else %}
|
|
<div class="divide-y divide-gray-200 mb-6">
|
|
{% for comment in comments %}
|
|
{% include "dashboard/comments/card.html" %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="flex items-center justify-center space-x-2 mb-6">
|
|
<button hx-get="/admin/comments?page={{ comments_current_page - 1 }}"
|
|
hx-target="#comments-list"
|
|
hx-swap="innerHTML"
|
|
hx-trigger="click"
|
|
class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 {% if comments_current_page <= 1 %}opacity-50 cursor-not-allowed{% endif %}"
|
|
{% if comments_current_page <= 1 %}disabled{% endif %}><</button>
|
|
<span class="px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md">Page: {{ comments_current_page }}</span>
|
|
<button hx-get="/admin/comments?page={{ comments_current_page + 1 }}"
|
|
hx-target="#comments-list"
|
|
hx-swap="innerHTML"
|
|
hx-trigger="click"
|
|
class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 {% if comments_current_page >= comments_max_page %}opacity-50 cursor-not-allowed{% endif %}"
|
|
{% if comments_current_page >= comments_max_page %}disabled{% endif %}>></button>
|
|
</div>
|
|
{% endblock %}
|
|
</div>
|
|
</div> |