bindmanager/templates/users.html

{% extends "layout.html" %}
{% block content %}
<div class="flex justify-between items-center mb-10">
    <div>
        <h2 class="text-4xl font-black text-white tracking-tighter italic">User Management</h2>
        <p class="text-gray-500 font-bold uppercase text-[10px] tracking-widest mt-2">Manage access and RBAC roles</p>
    </div>
    <button onclick="openAddUser()" class="bg-blue-600 hover:bg-blue-500 px-8 py-3 rounded-xl font-black shadow-2xl transition transform hover:scale-105 text-white uppercase text-xs tracking-widest">+ Create User</button>
</div>

<div class="bg-[#12161f] border border-gray-800 rounded-3xl overflow-hidden shadow-2xl">
    <table class="w-full text-left">
        <thead class="bg-black/20 text-[10px] font-black text-gray-500 uppercase tracking-widest border-b border-gray-800">
            <tr>
                <th class="p-6">Username</th>
                <th class="p-6">Role</th>
                <th class="p-6">Templates</th>
                <th class="p-6 text-right">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
            {% for u, data in users.items() %}
            <tr class="hover:bg-white/[0.02] transition">
                <td class="p-6 font-bold text-white">{{ u }}</td>
                <td class="p-6">
                    <span class="px-3 py-1 rounded-full text-[9px] font-black uppercase border {% if data.role=='admin' %}border-red-500/30 text-red-400 bg-red-500/10{% else %}border-blue-500/30 text-blue-400 bg-blue-500/10{% endif %}">
                        {{ data.role }}
                    </span>
                </td>
                <td class="p-6 text-xs text-gray-500">{{ data.assigned_templates|join(', ') or 'None' }}</td>
                <td class="p-6 text-right">
                    <button onclick="editUser('{{u}}', '{{data.role}}', {{data.assigned_templates|tojson}})" class="text-blue-500 hover:text-blue-400 text-[10px] font-black uppercase mr-4">Edit</button>
                    {% if u != 'admin' %}
                    <a href="/users/delete/{{ u }}" onclick="return confirm('Delete user?')" class="text-red-500 hover:text-red-400 text-[10px] font-black uppercase">Delete</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div id="userModal" class="hidden fixed inset-0 bg-black/90 backdrop-blur-md flex items-center justify-center z-50 p-4">
    <div class="bg-[#12161f] border border-gray-800 w-full max-w-md rounded-3xl p-8 shadow-2xl">
        <h3 id="modalTitle" class="text-xl font-black text-white mb-6 uppercase">Add User</h3>
        <form action="/users/save" method="POST" class="space-y-4">
            <input type="hidden" name="action" id="userAction" value="add">
            <input type="hidden" name="old_username" id="oldUsername">
            
            <input type="text" name="username" id="userName" placeholder="Username" required class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-3 text-sm font-bold text-white outline-none">
            <input type="password" name="password" id="userPass" placeholder="Password" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-3 text-sm font-bold text-white outline-none">
            
            <select name="role" id="userRole" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-3 text-sm font-bold text-white outline-none">
                <option value="user">User (Restricted)</option>
                <option value="admin">Administrator</option>
            </select>

            <div class="bg-black/20 p-4 rounded-xl border border-gray-800">
                <label class="text-[10px] font-black text-gray-500 uppercase block mb-3">Assigned Templates</label>
                <div class="grid grid-cols-2 gap-2">
                    {% for t in all_templates %}
                    <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer hover:text-white">
                        <input type="checkbox" name="assigned_templates[]" value="{{ t }}" class="template-check rounded border-gray-700 bg-gray-900 text-blue-600">
                        {{ t }}
                    </label>
                    {% endfor %}
                </div>
            </div>

            <div class="flex gap-4 pt-4">
                <button type="button" onclick="closeUserModal()" class="flex-1 bg-gray-800 text-gray-400 font-bold py-3 rounded-xl uppercase text-xs">Cancel</button>
                <button type="submit" class="flex-1 bg-blue-600 text-white font-black py-3 rounded-xl uppercase text-xs">Save</button>
            </div>
        </form>
    </div>
</div>

<script>
function openAddUser() {
    document.getElementById('userModal').classList.remove('hidden');
    document.getElementById('userAction').value = 'add';
    document.getElementById('modalTitle').innerText = 'Add User';
    document.getElementById('userName').value = '';
    document.querySelectorAll('.template-check').forEach(c => c.checked = false);
}
function editUser(u, role, templates) {
    document.getElementById('userModal').classList.remove('hidden');
    document.getElementById('userAction').value = 'edit';
    document.getElementById('oldUsername').value = u;
    document.getElementById('userName').value = u;
    document.getElementById('userRole').value = role;
    document.getElementById('modalTitle').innerText = 'Edit User';
    document.querySelectorAll('.template-check').forEach(c => {
        c.checked = templates.includes(c.value);
    });
}
function closeUserModal() { document.getElementById('userModal').classList.add('hidden'); }
</script>
{% endblock %}