first push
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
<%- include('../partials/head', { title: 'Categories' }) %>
|
||||
<%- include('../partials/adminNav', { currentPath: '/admin/categories' }) %>
|
||||
|
||||
<div class="pl-56 min-h-screen">
|
||||
<%- include('../partials/adminBanner') %>
|
||||
<div class="max-w-2xl mx-auto px-8 py-8">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-xl font-semibold text-white">Categories</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Organize your models into groups</p>
|
||||
</div>
|
||||
|
||||
<% if (error) { %>
|
||||
<div class="mb-6 flex items-start gap-3 bg-red-500/10 border border-red-500/30 rounded-lg px-4 py-3">
|
||||
<p class="text-sm text-red-400"><%= error %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- New category form -->
|
||||
<form method="POST" action="/admin/categories" class="bg-surface-900 border border-gray-800 rounded-2xl p-6 mb-6">
|
||||
<h2 class="text-sm font-semibold text-white mb-4">New Category</h2>
|
||||
<div class="flex gap-3">
|
||||
<input name="name" type="text" required placeholder="Category name"
|
||||
class="flex-1 bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors" />
|
||||
<input name="description" type="text" placeholder="Description (optional)"
|
||||
class="flex-1 bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors" />
|
||||
<button type="submit" class="btn-accent text-white rounded-lg px-5 py-2 text-sm font-medium transition-all shrink-0">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Category list -->
|
||||
<% if (categories.length === 0) { %>
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl px-8 py-12 text-center">
|
||||
<p class="text-sm text-gray-500">No categories yet. Create one above.</p>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl overflow-hidden">
|
||||
<% categories.forEach((cat, i) => { %>
|
||||
<div class="<%= i > 0 ? 'border-t border-gray-800' : '' %> px-5 py-4 flex items-center gap-4 hover:bg-surface-800 transition-colors group">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-white"><%= cat.name %></p>
|
||||
<% if (cat.description) { %>
|
||||
<p class="text-xs text-gray-500 mt-0.5"><%= cat.description %></p>
|
||||
<% } %>
|
||||
</div>
|
||||
<span class="text-xs text-gray-600 shrink-0"><%= cat.model_count %> model<%= cat.model_count !== 1 ? 's' : '' %></span>
|
||||
|
||||
<!-- Inline edit form (hidden by default) -->
|
||||
<form method="POST" action="/admin/categories/<%= cat.id %>/edit" class="hidden edit-form gap-2 items-center">
|
||||
<input name="name" value="<%= cat.name %>" type="text" required
|
||||
class="bg-surface-700 border border-gray-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-accent w-40 transition-colors" />
|
||||
<input name="description" value="<%= cat.description || '' %>" type="text" placeholder="Description"
|
||||
class="bg-surface-700 border border-gray-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent w-44 transition-colors" />
|
||||
<button type="submit" class="text-xs btn-accent text-white rounded-lg px-3 py-1.5">Save</button>
|
||||
<button type="button" class="text-xs text-gray-500 hover:text-white cancel-edit">Cancel</button>
|
||||
</form>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex items-center gap-1 action-buttons">
|
||||
<button type="button" class="edit-btn p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors" title="Rename">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" />
|
||||
</svg>
|
||||
</button>
|
||||
<form method="POST" action="/admin/categories/<%= cat.id %>/delete"
|
||||
onsubmit="return confirm('Delete «<%= cat.name %>»? Models in this category will become uncategorized.')">
|
||||
<button type="submit" class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Delete">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user