Manage users on admin panel

templates/dashboard/users/card.html

@@ -0,0 +1,39 @@
+<div id="user-{{ user.user_id }}"
+     class="bg-gray-50 rounded-lg p-4 border border-gray-200">
+    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between">
+        <div class="flex-1">
+            <div class="flex items-center space-x-2">
+                <a href="/users/{{ user.username }}"
+                   class="font-medium text-gray-900 hover:text-blue-600 hover:underline truncate">
+                    {{ user.username }}
+                </a>
+                {% if user.role.to_string() == "admin" %}
+                <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 flex-shrink-0">
+                        admin
+                    </span>
+                {% else %}
+                <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 flex-shrink-0">
+                        writer
+                    </span>
+                {% endif %}
+            </div>
+            <div class="text-sm text-gray-500 mt-1">{{ user.formatted_date() }}</div>
+        </div>
+        <div class="mt-3 sm:mt-0 sm:ml-4">
+            <button hx-delete="/admin/users/{{ user.user_id }}"
+                    hx-target="#user-{{ user.user_id }}"
+                    hx-swap="outerHTML"
+                    hx-confirm="Are you sure you want to delete this user?"
+                    class="inline-flex items-center py-1 px-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 group">
+                <svg class="w-4 h-4 mr-2 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>
+                Delete
+            </button>
+        </div>
+    </div>
+</div>