diff --git a/weed/admin/view/app/groups_templ.go b/weed/admin/view/app/groups_templ.go
index ec131521b..ae9e3fbdb 100644
--- a/weed/admin/view/app/groups_templ.go
+++ b/weed/admin/view/app/groups_templ.go
@@ -129,123 +129,115 @@ func Groups(data dash.GroupsPageData) templ.Component {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</td><td>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</td><td><button class=\"btn btn-sm btn-outline-primary me-1\" data-group-name=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.ComponentScript{Call: fmt.Sprintf("viewGroup('%s')", group.Name)})
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(group.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<button class=\"btn btn-sm btn-outline-primary me-1\" onclick=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 113, Col: 79}
 				}
-				var templ_7745c5c3_Var7 templ.ComponentScript = templ.ComponentScript{Call: fmt.Sprintf("viewGroup('%s')", group.Name)}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7.Call)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"><i class=\"fas fa-eye\"></i></button> ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" data-action=\"view\"><i class=\"fas fa-eye\"></i></button> <button class=\"btn btn-sm btn-outline-danger\" data-group-name=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.ComponentScript{Call: fmt.Sprintf("deleteGroup('%s')", group.Name)})
+				var templ_7745c5c3_Var8 string
+				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(group.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<button class=\"btn btn-sm btn-outline-danger\" onclick=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 118, Col: 79}
 				}
-				var templ_7745c5c3_Var8 templ.ComponentScript = templ.ComponentScript{Call: fmt.Sprintf("deleteGroup('%s')", group.Name)}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\"><i class=\"fas fa-trash\"></i></button></td></tr>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\" data-action=\"delete\"><i class=\"fas fa-trash\"></i></button></td></tr>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</tbody></table></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</tbody></table></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div></div><!-- Create Group Modal --><div class=\"modal fade\" id=\"createGroupModal\" tabindex=\"-1\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">Create Group</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><form id=\"createGroupForm\"><div class=\"mb-3\"><label for=\"groupName\" class=\"form-label\">Group Name</label> <input type=\"text\" class=\"form-control\" id=\"groupName\" name=\"name\" required placeholder=\"Enter group name\"></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"createGroup()\">Create</button></div></div></div></div><!-- View Group Modal --><div class=\"modal fade\" id=\"viewGroupModal\" tabindex=\"-1\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"viewGroupTitle\">Group Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><ul class=\"nav nav-tabs\" id=\"groupTabs\" role=\"tablist\"><li class=\"nav-item\"><a class=\"nav-link active\" id=\"members-tab\" data-bs-toggle=\"tab\" href=\"#membersPane\" role=\"tab\">Members</a></li><li class=\"nav-item\"><a class=\"nav-link\" id=\"policies-tab\" data-bs-toggle=\"tab\" href=\"#policiesPane\" role=\"tab\">Policies</a></li><li class=\"nav-item\"><a class=\"nav-link\" id=\"settings-tab\" data-bs-toggle=\"tab\" href=\"#settingsPane\" role=\"tab\">Settings</a></li></ul><div class=\"tab-content mt-3\" id=\"groupTabContent\"><!-- Members Tab --><div class=\"tab-pane fade show active\" id=\"membersPane\" role=\"tabpanel\"><div class=\"mb-3\"><div class=\"input-group\"><select class=\"form-select\" id=\"addMemberSelect\"><option value=\"\">Select user to add...</option> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div></div><!-- Create Group Modal --><div class=\"modal fade\" id=\"createGroupModal\" tabindex=\"-1\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">Create Group</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><form id=\"createGroupForm\"><div class=\"mb-3\"><label for=\"groupName\" class=\"form-label\">Group Name</label> <input type=\"text\" class=\"form-control\" id=\"groupName\" name=\"name\" required placeholder=\"Enter group name\"></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"createGroup()\">Create</button></div></div></div></div><!-- View Group Modal --><div class=\"modal fade\" id=\"viewGroupModal\" tabindex=\"-1\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"viewGroupTitle\">Group Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><ul class=\"nav nav-tabs\" id=\"groupTabs\" role=\"tablist\"><li class=\"nav-item\"><a class=\"nav-link active\" id=\"members-tab\" data-bs-toggle=\"tab\" href=\"#membersPane\" role=\"tab\">Members</a></li><li class=\"nav-item\"><a class=\"nav-link\" id=\"policies-tab\" data-bs-toggle=\"tab\" href=\"#policiesPane\" role=\"tab\">Policies</a></li><li class=\"nav-item\"><a class=\"nav-link\" id=\"settings-tab\" data-bs-toggle=\"tab\" href=\"#settingsPane\" role=\"tab\">Settings</a></li></ul><div class=\"tab-content mt-3\" id=\"groupTabContent\"><!-- Members Tab --><div class=\"tab-pane fade show active\" id=\"membersPane\" role=\"tabpanel\"><div class=\"mb-3\"><div class=\"input-group\"><select class=\"form-select\" id=\"addMemberSelect\"><option value=\"\">Select user to add...</option> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, user := range data.AvailableUsers {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<option value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<option value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(user)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 183, Col: 67}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 185, Col: 67}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(user)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 183, Col: 74}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 185, Col: 74}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</option>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</option>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</select> <button class=\"btn btn-outline-primary\" type=\"button\" onclick=\"addMemberToGroup()\"><i class=\"fas fa-plus\"></i> Add</button></div></div><div id=\"membersList\"></div></div><!-- Policies Tab --><div class=\"tab-pane fade\" id=\"policiesPane\" role=\"tabpanel\"><div class=\"mb-3\"><div class=\"input-group\"><select class=\"form-select\" id=\"attachPolicySelect\"><option value=\"\">Select policy to attach...</option> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</select> <button class=\"btn btn-outline-primary\" type=\"button\" onclick=\"addMemberToGroup()\"><i class=\"fas fa-plus\"></i> Add</button></div></div><div id=\"membersList\"></div></div><!-- Policies Tab --><div class=\"tab-pane fade\" id=\"policiesPane\" role=\"tabpanel\"><div class=\"mb-3\"><div class=\"input-group\"><select class=\"form-select\" id=\"attachPolicySelect\"><option value=\"\">Select policy to attach...</option> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, policy := range data.AvailablePolicies {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<option value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<option value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(policy)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 200, Col: 69}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 202, Col: 69}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(policy)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 200, Col: 78}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `weed/admin/view/app/groups.templ`, Line: 202, Col: 78}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</option>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</option>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</select> <button class=\"btn btn-outline-primary\" type=\"button\" onclick=\"attachPolicyToGroup()\"><i class=\"fas fa-plus\"></i> Attach</button></div></div><div id=\"policiesList\"></div></div><!-- Settings Tab --><div class=\"tab-pane fade\" id=\"settingsPane\" role=\"tabpanel\"><div class=\"form-check form-switch mb-3\"><input class=\"form-check-input\" type=\"checkbox\" id=\"groupEnabledSwitch\" checked onchange=\"toggleGroupStatus()\"> <label class=\"form-check-label\" for=\"groupEnabledSwitch\">Group Enabled</label></div></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div></div><script src=\"/static/js/iam-utils.js\"></script><script>\n        // Groups page JavaScript\n        let currentGroupName = '';\n\n        async function createGroup() {\n            const name = document.getElementById('groupName').value.trim();\n            if (!name) {\n                showAlert('Group name is required', 'error');\n                return;\n            }\n            try {\n                const response = await fetch('/api/groups', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ name: name })\n                });\n                if (response.ok) {\n                    showAlert('Group created successfully', 'success');\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to create group: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to create group: ' + error.message, 'error');\n            }\n        }\n\n        async function viewGroup(name) {\n            currentGroupName = name;\n            document.getElementById('viewGroupTitle').textContent = 'Group: ' + name;\n            await refreshGroupDetails();\n            new bootstrap.Modal(document.getElementById('viewGroupModal')).show();\n        }\n\n        async function refreshGroupDetails() {\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName));\n                if (!response.ok) throw new Error('Failed to fetch group');\n                const group = await response.json();\n\n                // Render members using DOM APIs to prevent XSS\n                const membersList = document.getElementById('membersList');\n                membersList.innerHTML = '';\n                const membersTable = document.createElement('table');\n                membersTable.className = 'table table-sm';\n                const membersTbody = document.createElement('tbody');\n                if (group.members && group.members.length > 0) {\n                    for (const member of group.members) {\n                        const tr = membersTbody.insertRow();\n                        const td1 = tr.insertCell();\n                        td1.textContent = member;\n                        const td2 = tr.insertCell();\n                        const btn = document.createElement('button');\n                        btn.className = 'btn btn-sm btn-outline-danger';\n                        btn.onclick = () => removeMember(member);\n                        btn.innerHTML = '<i class=\"fas fa-times\"></i>';\n                        td2.appendChild(btn);\n                    }\n                } else {\n                    const tr = membersTbody.insertRow();\n                    const td = tr.insertCell();\n                    td.className = 'text-muted';\n                    td.textContent = 'No members';\n                }\n                membersTable.appendChild(membersTbody);\n                membersList.appendChild(membersTable);\n\n                // Render policies using DOM APIs to prevent XSS\n                const policiesList = document.getElementById('policiesList');\n                policiesList.innerHTML = '';\n                const policiesTable = document.createElement('table');\n                policiesTable.className = 'table table-sm';\n                const policiesTbody = document.createElement('tbody');\n                if (group.policy_names && group.policy_names.length > 0) {\n                    for (const policy of group.policy_names) {\n                        const tr = policiesTbody.insertRow();\n                        const td1 = tr.insertCell();\n                        td1.textContent = policy;\n                        const td2 = tr.insertCell();\n                        const btn = document.createElement('button');\n                        btn.className = 'btn btn-sm btn-outline-danger';\n                        btn.onclick = () => detachPolicy(policy);\n                        btn.innerHTML = '<i class=\"fas fa-times\"></i>';\n                        td2.appendChild(btn);\n                    }\n                } else {\n                    const tr = policiesTbody.insertRow();\n                    const td = tr.insertCell();\n                    td.className = 'text-muted';\n                    td.textContent = 'No policies attached';\n                }\n                policiesTable.appendChild(policiesTbody);\n                policiesList.appendChild(policiesTable);\n\n                // Update status toggle\n                document.getElementById('groupEnabledSwitch').checked = (group.status === 'enabled');\n            } catch (error) {\n                console.error('Error fetching group details:', error);\n            }\n        }\n\n        async function addMemberToGroup() {\n            const username = document.getElementById('addMemberSelect').value;\n            if (!username) return;\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/members', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ username: username })\n                });\n                if (response.ok) {\n                    await refreshGroupDetails();\n                    showAlert('Member added', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to add member: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to add member: ' + error.message, 'error');\n            }\n        }\n\n        async function removeMember(username) {\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/members/' + encodeURIComponent(username), {\n                    method: 'DELETE'\n                });\n                if (response.ok) {\n                    await refreshGroupDetails();\n                    showAlert('Member removed', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to remove member: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to remove member: ' + error.message, 'error');\n            }\n        }\n\n        async function attachPolicyToGroup() {\n            const policyName = document.getElementById('attachPolicySelect').value;\n            if (!policyName) return;\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/policies', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ policy_name: policyName })\n                });\n                if (response.ok) {\n                    await refreshGroupDetails();\n                    showAlert('Policy attached', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to attach policy: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to attach policy: ' + error.message, 'error');\n            }\n        }\n\n        async function detachPolicy(policyName) {\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/policies/' + encodeURIComponent(policyName), {\n                    method: 'DELETE'\n                });\n                if (response.ok) {\n                    await refreshGroupDetails();\n                    showAlert('Policy detached', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to detach policy: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to detach policy: ' + error.message, 'error');\n            }\n        }\n\n        async function toggleGroupStatus() {\n            const enabled = document.getElementById('groupEnabledSwitch').checked;\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/status', {\n                    method: 'PUT',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ enabled: enabled })\n                });\n                if (response.ok) {\n                    showAlert('Group status updated', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to update status: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to update status: ' + error.message, 'error');\n            }\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</select> <button class=\"btn btn-outline-primary\" type=\"button\" onclick=\"attachPolicyToGroup()\"><i class=\"fas fa-plus\"></i> Attach</button></div></div><div id=\"policiesList\"></div></div><!-- Settings Tab --><div class=\"tab-pane fade\" id=\"settingsPane\" role=\"tabpanel\"><div class=\"form-check form-switch mb-3\"><input class=\"form-check-input\" type=\"checkbox\" id=\"groupEnabledSwitch\" checked onchange=\"toggleGroupStatus()\"> <label class=\"form-check-label\" for=\"groupEnabledSwitch\">Group Enabled</label></div></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div></div><script src=\"/static/js/iam-utils.js\"></script><script>\n        // Groups page JavaScript\n        let currentGroupName = '';\n\n        async function createGroup() {\n            const name = document.getElementById('groupName').value.trim();\n            if (!name) {\n                showAlert('Group name is required', 'error');\n                return;\n            }\n            try {\n                const response = await fetch('/api/groups', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ name: name })\n                });\n                if (response.ok) {\n                    showAlert('Group created successfully', 'success');\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to create group: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to create group: ' + error.message, 'error');\n            }\n        }\n\n        async function viewGroup(name) {\n            currentGroupName = name;\n            document.getElementById('viewGroupTitle').textContent = 'Group: ' + name;\n            await refreshGroupDetails(name);\n            new bootstrap.Modal(document.getElementById('viewGroupModal')).show();\n        }\n\n        async function refreshGroupDetails(requestedName) {\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(requestedName));\n                if (!response.ok) throw new Error('Failed to fetch group');\n                if (requestedName !== currentGroupName) return; // stale response\n                const group = await response.json();\n\n                // Render members using DOM APIs to prevent XSS\n                const membersList = document.getElementById('membersList');\n                membersList.innerHTML = '';\n                const membersTable = document.createElement('table');\n                membersTable.className = 'table table-sm';\n                const membersTbody = document.createElement('tbody');\n                if (group.members && group.members.length > 0) {\n                    for (const member of group.members) {\n                        const tr = membersTbody.insertRow();\n                        const td1 = tr.insertCell();\n                        td1.textContent = member;\n                        const td2 = tr.insertCell();\n                        const btn = document.createElement('button');\n                        btn.className = 'btn btn-sm btn-outline-danger';\n                        btn.onclick = () => removeMember(member);\n                        btn.innerHTML = '<i class=\"fas fa-times\"></i>';\n                        td2.appendChild(btn);\n                    }\n                } else {\n                    const tr = membersTbody.insertRow();\n                    const td = tr.insertCell();\n                    td.className = 'text-muted';\n                    td.textContent = 'No members';\n                }\n                membersTable.appendChild(membersTbody);\n                membersList.appendChild(membersTable);\n\n                // Render policies using DOM APIs to prevent XSS\n                const policiesList = document.getElementById('policiesList');\n                policiesList.innerHTML = '';\n                const policiesTable = document.createElement('table');\n                policiesTable.className = 'table table-sm';\n                const policiesTbody = document.createElement('tbody');\n                if (group.policy_names && group.policy_names.length > 0) {\n                    for (const policy of group.policy_names) {\n                        const tr = policiesTbody.insertRow();\n                        const td1 = tr.insertCell();\n                        td1.textContent = policy;\n                        const td2 = tr.insertCell();\n                        const btn = document.createElement('button');\n                        btn.className = 'btn btn-sm btn-outline-danger';\n                        btn.onclick = () => detachPolicy(policy);\n                        btn.innerHTML = '<i class=\"fas fa-times\"></i>';\n                        td2.appendChild(btn);\n                    }\n                } else {\n                    const tr = policiesTbody.insertRow();\n                    const td = tr.insertCell();\n                    td.className = 'text-muted';\n                    td.textContent = 'No policies attached';\n                }\n                policiesTable.appendChild(policiesTbody);\n                policiesList.appendChild(policiesTable);\n\n                // Update status toggle\n                document.getElementById('groupEnabledSwitch').checked = (group.status === 'enabled');\n            } catch (error) {\n                console.error('Error fetching group details:', error);\n            }\n        }\n\n        async function addMemberToGroup() {\n            const username = document.getElementById('addMemberSelect').value;\n            if (!username) return;\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/members', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ username: username })\n                });\n                if (response.ok) {\n                    await refreshGroupDetails(currentGroupName);\n                    showAlert('Member added', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to add member: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to add member: ' + error.message, 'error');\n            }\n        }\n\n        async function removeMember(username) {\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/members/' + encodeURIComponent(username), {\n                    method: 'DELETE'\n                });\n                if (response.ok) {\n                    await refreshGroupDetails(currentGroupName);\n                    showAlert('Member removed', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to remove member: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to remove member: ' + error.message, 'error');\n            }\n        }\n\n        async function attachPolicyToGroup() {\n            const policyName = document.getElementById('attachPolicySelect').value;\n            if (!policyName) return;\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/policies', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ policy_name: policyName })\n                });\n                if (response.ok) {\n                    await refreshGroupDetails(currentGroupName);\n                    showAlert('Policy attached', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to attach policy: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to attach policy: ' + error.message, 'error');\n            }\n        }\n\n        async function detachPolicy(policyName) {\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/policies/' + encodeURIComponent(policyName), {\n                    method: 'DELETE'\n                });\n                if (response.ok) {\n                    await refreshGroupDetails(currentGroupName);\n                    showAlert('Policy detached', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to detach policy: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to detach policy: ' + error.message, 'error');\n            }\n        }\n\n        async function toggleGroupStatus() {\n            const enabled = document.getElementById('groupEnabledSwitch').checked;\n            try {\n                const response = await fetch('/api/groups/' + encodeURIComponent(currentGroupName) + '/status', {\n                    method: 'PUT',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ enabled: enabled })\n                });\n                if (response.ok) {\n                    showAlert('Group status updated', 'success');\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showAlert('Failed to update status: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                showAlert('Failed to update status: ' + error.message, 'error');\n            }\n        }\n\n        // Event delegation for group action buttons\n        document.addEventListener('click', function(e) {\n            const btn = e.target.closest('[data-action]');\n            if (!btn) return;\n            const name = btn.dataset.groupName;\n            if (!name) return;\n            if (btn.dataset.action === 'view') viewGroup(name);\n            else if (btn.dataset.action === 'delete') deleteGroup(name);\n        });\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}