Comments management

templates/dashboard/comments/card.html

@@ -0,0 +1,47 @@
+<div id="comment-{{ comment.comment_id }}"
+     class="block py-4 hover:bg-gray-50 px-6 transition-colors group">
+    <div class="flex items-start justify-between">
+        <div class="flex-1 min-w-0">
+            <div class="flex items-center space-x-2 mb-2">
+                <span class="text-sm font-medium text-gray-900">
+                    {% if let Some(name) = comment.author %}
+                        {{ name }}
+                    {% else %}
+                        Anonymous
+                    {% endif %}
+                </span>
+                <span class="text-gray-400">•</span>
+                <span class="text-xs text-gray-500">on</span>
+                <a href="/posts/{{ comment.post_id }}" class="text-sm text-blue-600 hover:underline truncate">
+                    #{{ comment.post_id.to_string()[..8] }}
+                </a>
+            </div>
+            <p class="text-sm text-gray-700 mb-2 line-clamp-2">{{ comment.content }}</p>
+            <div class="flex items-center text-sm text-gray-500">
+                <svg class="w-4 h-4 mr-1.5"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                </svg>
+                <time datetime="{{ comment.published_at }}">
+                    {{ comment.formatted_date() }}
+                </time>
+            </div>
+        </div>
+        <button hx-delete="/admin/comments/{{ comment.comment_id }}"
+                hx-target="#comment-{{ comment.comment_id }}"
+                hx-swap="outerHTML"
+                hx-confirm="Are you sure you want to delete this comment?"
+                class="inline-flex items-center p-2 text-sm font-medium text-red-500 bg-red-50 border-2 border-dashed border-red-300 rounded-md hover:bg-red-100 hover:border-red-400 hover:text-red-600 transition-all duration-200 flex-shrink-0 ml-4">
+            <svg class="w-4 h-4 group-hover:scale-110 transition-transform"
+                 fill="none"
+                 viewBox="0 0 24 24"
+                 stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+            </svg>
+        </button>
+    </div>
+</div>