ldap-rest 0.0.1

package/static/browser/ldap-group-editor.esm.js

@@ -0,0 +1,1399 @@
+/**
+ * API Client for LDAP Group operations
+ */
+class GroupApiClient {
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl;
+    }
+    async getConfig() {
+        const response = await fetch(`${this.baseUrl}/api/v1/config`);
+        if (!response.ok) {
+            throw new Error(`Failed to load config: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async getOrganizations() {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations/top`);
+        if (!response.ok) {
+            throw new Error(`Failed to load organizations: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async getGroups(orgDn) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(orgDn)}/subnodes?objectClass=groupOfNames`);
+        if (!response.ok) {
+            throw new Error(`Failed to load groups: ${response.statusText}`);
+        }
+        const subnodes = await response.json();
+        // Filter to keep only groups
+        return subnodes.filter((node) => {
+            const classes = Array.isArray(node.objectClass)
+                ? node.objectClass
+                : [node.objectClass];
+            return classes.includes('groupOfNames') || classes.includes('group');
+        });
+    }
+    async getGroup(dn) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(dn)}`);
+        if (!response.ok) {
+            throw new Error(`Failed to load group: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async updateGroup(dn, data) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(dn)}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to update group: ${error}`);
+        }
+    }
+    async createEntry(dn, data) {
+        // Use the groups API for creating groups
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to create entry: ${error}`);
+        }
+    }
+    async deleteEntry(dn) {
+        // Use the groups API for deleting groups
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(dn)}`, {
+            method: 'DELETE',
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to delete entry: ${error}`);
+        }
+    }
+    async moveGroup(cn, targetOrgDn) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(cn)}/move`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ targetOrgDn }),
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to move group: ${error}`);
+        }
+    }
+    async renameGroup(cn, newCn) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(cn)}/rename`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ newCn }),
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to rename group: ${error}`);
+        }
+    }
+    async getPointerOptions(branch) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/search?base=${encodeURIComponent(branch)}&scope=one`);
+        if (!response.ok) {
+            throw new Error(`Failed to load pointer options: ${response.statusText}`);
+        }
+        const entries = await response.json();
+        return entries.map((entry) => ({
+            dn: entry.dn,
+            label: entry.cn?.[0] || entry.ou?.[0] || entry.dn,
+        }));
+    }
+}
+
+/**
+ * Group Tree Component - Shows organizations tree (same as UserTree)
+ */
+class GroupTree {
+    constructor(container, apiBaseUrl, onOrgSelect) {
+        this.expandedNodes = new Set();
+        this.selectedDn = null;
+        this.rootDn = null;
+        this.container = container;
+        this.apiBaseUrl = apiBaseUrl;
+        this.onOrgSelect = onOrgSelect;
+    }
+    async init() {
+        this.container.innerHTML = `
+      <div class="group-tree">
+        <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+          <span class="material-icons">account_tree</span>
+          Organizations
+        </h3>
+        <div id="tree-content">
+          <div class="loading"><div class="spinner"></div></div>
+        </div>
+      </div>
+    `;
+        try {
+            const response = await fetch(`${this.apiBaseUrl}/api/v1/ldap/organizations/top`);
+            if (!response.ok)
+                throw new Error('Failed to load organizations');
+            const topOrg = await response.json();
+            this.rootDn = topOrg.dn;
+            await this.renderTree();
+        }
+        catch (error) {
+            console.error('Failed to init tree:', error);
+            const treeEl = this.container.querySelector('#tree-content');
+            if (treeEl) {
+                treeEl.innerHTML =
+                    '<p style="color: #f44336;">Failed to load organizations</p>';
+            }
+        }
+    }
+    async renderTree() {
+        const treeEl = this.container.querySelector('#tree-content');
+        if (!treeEl || !this.rootDn)
+            return;
+        try {
+            const html = await this.renderNode(this.rootDn, 0);
+            treeEl.innerHTML = html;
+            this.attachEventListeners();
+        }
+        catch (error) {
+            console.error('Failed to render tree:', error);
+            treeEl.innerHTML = '<p style="color: #f44336;">Error rendering tree</p>';
+        }
+    }
+    async renderNode(dn, level) {
+        const isExpanded = this.expandedNodes.has(dn);
+        const isSelected = this.selectedDn === dn;
+        const indent = level * 20;
+        // Get node info
+        const response = await fetch(`${this.apiBaseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`);
+        if (!response.ok)
+            throw new Error('Failed to load node');
+        const node = await response.json();
+        // Extract display name
+        let displayName = dn;
+        if (node.ou) {
+            displayName = Array.isArray(node.ou) ? node.ou[0] : node.ou;
+        }
+        else if (node.cn) {
+            displayName = Array.isArray(node.cn) ? node.cn[0] : node.cn;
+        }
+        let html = `
+      <div class="tree-node ${isSelected ? 'active' : ''}" style="padding-left: ${indent}px; padding: 8px 8px 8px ${indent}px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
+        <span class="material-icons tree-node-toggle" data-dn="${this.escapeHtml(dn)}" style="font-size: 18px; cursor: pointer;">
+          ${isExpanded ? 'expand_more' : 'chevron_right'}
+        </span>
+        <span class="material-icons" style="font-size: 18px;">business</span>
+        <span class="tree-node-label" data-dn="${this.escapeHtml(dn)}">${this.escapeHtml(displayName)}</span>
+      </div>
+    `;
+        if (isExpanded) {
+            try {
+                const subnodesResponse = await fetch(`${this.apiBaseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}/subnodes`);
+                if (!subnodesResponse.ok)
+                    throw new Error('Failed to load subnodes');
+                const subnodes = await subnodesResponse.json();
+                const orgs = subnodes.filter((n) => {
+                    const classes = Array.isArray(n.objectClass)
+                        ? n.objectClass
+                        : n.objectClass
+                            ? [n.objectClass]
+                            : [];
+                    return (classes.includes('organizationalUnit') ||
+                        classes.includes('organization'));
+                });
+                for (const subnode of orgs) {
+                    html += await this.renderNode(subnode.dn, level + 1);
+                }
+            }
+            catch (error) {
+                console.error('Failed to load subnodes for', dn, error);
+            }
+        }
+        return html;
+    }
+    attachEventListeners() {
+        // Toggle expand/collapse
+        this.container.querySelectorAll('.tree-node-toggle').forEach(el => {
+            el.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const dn = el.getAttribute('data-dn');
+                if (!dn)
+                    return;
+                if (this.expandedNodes.has(dn)) {
+                    this.expandedNodes.delete(dn);
+                }
+                else {
+                    this.expandedNodes.add(dn);
+                }
+                await this.renderTree();
+            });
+        });
+        // Select organization
+        this.container.querySelectorAll('.tree-node-label').forEach(el => {
+            el.addEventListener('click', e => {
+                e.stopPropagation();
+                const dn = el.getAttribute('data-dn');
+                if (!dn)
+                    return;
+                this.selectedDn = dn;
+                this.onOrgSelect(dn);
+                this.renderTree();
+            });
+        });
+    }
+    escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+}
+
+/**
+ * Move Group Modal Component - Modal for selecting target organization when moving a group
+ */
+class MoveGroupModal {
+    constructor(api, currentOrgDn, onMove) {
+        this.modal = null;
+        this.expandedNodes = new Set();
+        this.selectedOrgDn = null;
+        this.api = api;
+        this.currentOrgDn = currentOrgDn;
+        this.onMove = onMove;
+    }
+    async show() {
+        // Create modal backdrop
+        this.modal = document.createElement('div');
+        this.modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    `;
+        // Create modal content
+        const modalContent = document.createElement('div');
+        modalContent.style.cssText = `
+      background: white;
+      border-radius: 8px;
+      padding: 24px;
+      max-width: 600px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    `;
+        modalContent.innerHTML = `
+      <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+        <span class="material-icons">drive_file_move</span>
+        Move Group to Organization
+      </h3>
+      <p style="margin: 0 0 16px 0; color: #666;">Select the target organization:</p>
+      <div id="org-tree" style="margin-bottom: 24px; max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; padding: 12px;">
+        <div class="loading"><div class="spinner"></div></div>
+      </div>
+      <div style="display: flex; gap: 12px; justify-content: flex-end;">
+        <button type="button" id="cancel-move-btn" style="padding: 10px 20px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer;">Cancel</button>
+        <button type="button" id="confirm-move-btn" disabled style="padding: 10px 20px; background: var(--primary-color, #6200ee); color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+          <span class="material-icons" style="font-size: 18px;">drive_file_move</span>
+          Move Here
+        </button>
+      </div>
+    `;
+        this.modal.appendChild(modalContent);
+        document.body.appendChild(this.modal);
+        // Attach event listeners
+        const cancelBtn = this.modal.querySelector('#cancel-move-btn');
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', () => this.close());
+        }
+        const confirmBtn = this.modal.querySelector('#confirm-move-btn');
+        if (confirmBtn) {
+            confirmBtn.addEventListener('click', () => this.handleConfirm());
+        }
+        // Click outside to close
+        this.modal.addEventListener('click', e => {
+            if (e.target === this.modal) {
+                this.close();
+            }
+        });
+        // Load organization tree
+        await this.loadOrgTree();
+    }
+    async loadOrgTree() {
+        const treeContainer = this.modal?.querySelector('#org-tree');
+        if (!treeContainer)
+            return;
+        try {
+            // Get top organization
+            const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/organizations/top`);
+            if (!response.ok)
+                throw new Error('Failed to load organizations');
+            const topOrg = await response.json();
+            const rootDn = topOrg.dn;
+            // Render tree starting from root
+            const html = await this.renderNode(rootDn, 0);
+            treeContainer.innerHTML = html;
+            this.attachTreeEventListeners();
+        }
+        catch (error) {
+            console.error('Failed to load organization tree:', error);
+            treeContainer.innerHTML = `<p style="color: #f44336;">Failed to load organizations</p>`;
+        }
+    }
+    async renderNode(dn, level) {
+        const isExpanded = this.expandedNodes.has(dn);
+        const isSelected = this.selectedOrgDn === dn;
+        const isCurrent = this.currentOrgDn === dn;
+        const indent = level * 20;
+        // Get node info
+        const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`);
+        if (!response.ok)
+            throw new Error('Failed to load node');
+        const node = await response.json();
+        // Extract display name
+        let displayName = dn;
+        if (node.ou) {
+            displayName = Array.isArray(node.ou) ? node.ou[0] : node.ou;
+        }
+        else if (node.cn) {
+            displayName = Array.isArray(node.cn) ? node.cn[0] : node.cn;
+        }
+        const nodeClass = `tree-node ${isSelected ? 'selected' : ''} ${isCurrent ? 'current-org' : ''}`;
+        const nodeStyle = `padding-left: ${indent}px; padding: 8px 8px 8px ${indent}px; cursor: ${isCurrent ? 'not-allowed' : 'pointer'}; display: flex; align-items: center; gap: 4px; ${isCurrent ? 'opacity: 0.5; background: #f5f5f5;' : isSelected ? 'background: #e3f2fd;' : ''}`;
+        let html = `
+      <div class="${nodeClass}" style="${nodeStyle}" data-dn="${this.escapeHtml(dn)}" data-is-current="${isCurrent}">
+        <span class="material-icons tree-node-toggle" data-dn="${this.escapeHtml(dn)}" style="font-size: 18px; cursor: pointer;">
+          ${isExpanded ? 'expand_more' : 'chevron_right'}
+        </span>
+        <span class="material-icons" style="font-size: 18px;">business</span>
+        <span class="tree-node-label" data-dn="${this.escapeHtml(dn)}">${this.escapeHtml(displayName)}</span>
+        ${isCurrent ? '<span style="font-size: 12px; color: #666; margin-left: 8px;">(current)</span>' : ''}
+      </div>
+    `;
+        // If expanded, load and render subnodes
+        if (isExpanded) {
+            try {
+                const subnodesResponse = await fetch(`${this.api['baseUrl']}/api/v1/ldap/organizations/${encodeURIComponent(dn)}/subnodes`);
+                if (!subnodesResponse.ok)
+                    throw new Error('Failed to load subnodes');
+                const subnodes = await subnodesResponse.json();
+                const orgs = subnodes.filter((n) => {
+                    const classes = Array.isArray(n.objectClass)
+                        ? n.objectClass
+                        : n.objectClass
+                            ? [n.objectClass]
+                            : [];
+                    return (classes.includes('organizationalUnit') ||
+                        classes.includes('organization'));
+                });
+                for (const subnode of orgs) {
+                    html += await this.renderNode(subnode.dn, level + 1);
+                }
+            }
+            catch (error) {
+                console.error('Failed to load subnodes for', dn, error);
+            }
+        }
+        return html;
+    }
+    attachTreeEventListeners() {
+        const treeContainer = this.modal?.querySelector('#org-tree');
+        if (!treeContainer)
+            return;
+        // Toggle expand/collapse
+        treeContainer.querySelectorAll('.tree-node-toggle').forEach(el => {
+            el.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const dn = el.getAttribute('data-dn');
+                if (!dn)
+                    return;
+                if (this.expandedNodes.has(dn)) {
+                    this.expandedNodes.delete(dn);
+                }
+                else {
+                    this.expandedNodes.add(dn);
+                }
+                await this.loadOrgTree();
+            });
+        });
+        // Select organization
+        treeContainer.querySelectorAll('.tree-node').forEach(el => {
+            el.addEventListener('click', () => {
+                const isCurrent = el.getAttribute('data-is-current') === 'true';
+                if (isCurrent)
+                    return; // Cannot select current organization
+                const dn = el.getAttribute('data-dn');
+                if (!dn)
+                    return;
+                this.selectedOrgDn = dn;
+                // Update UI
+                treeContainer.querySelectorAll('.tree-node').forEach(node => {
+                    node.classList.remove('selected');
+                    node.style.background = '';
+                });
+                el.classList.add('selected');
+                el.style.background = '#e3f2fd';
+                // Enable confirm button
+                const confirmBtn = this.modal?.querySelector('#confirm-move-btn');
+                if (confirmBtn) {
+                    confirmBtn.disabled = false;
+                    confirmBtn.style.opacity = '1';
+                    confirmBtn.style.cursor = 'pointer';
+                }
+            });
+        });
+    }
+    async handleConfirm() {
+        if (!this.selectedOrgDn)
+            return;
+        try {
+            await this.onMove(this.selectedOrgDn);
+            this.close();
+        }
+        catch (error) {
+            console.error('Failed to move group:', error);
+            // Error will be shown by the parent component
+        }
+    }
+    close() {
+        if (this.modal) {
+            document.body.removeChild(this.modal);
+            this.modal = null;
+        }
+    }
+    escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+}
+
+/**
+ * Group Property Editor Component - Edits properties of a selected group
+ */
+class GroupPropertyEditor {
+    constructor(container, api, groupDn) {
+        this.group = null;
+        this.schema = null;
+        this.saveCallback = null;
+        this.container = container;
+        this.api = api;
+        this.groupDn = groupDn;
+    }
+    async init() {
+        try {
+            await this.loadGroup();
+            await this.loadSchema();
+            this.render();
+            this.attachEventListeners();
+        }
+        catch (error) {
+            console.error('Failed to init GroupPropertyEditor:', error);
+            throw error;
+        }
+    }
+    async loadGroup() {
+        console.warn('[GroupPropertyEditor] Loading group:', this.groupDn);
+        this.group = await this.api.getGroup(this.groupDn);
+        console.warn('[GroupPropertyEditor] Group loaded:', this.group);
+    }
+    async loadSchema() {
+        console.warn('[GroupPropertyEditor] Loading schema...');
+        const config = await this.api.getConfig();
+        console.warn('[GroupPropertyEditor] Config loaded:', config);
+        // First check in features.ldapGroups (from ldapGroups plugin)
+        const groupsConfig = config.features?.ldapGroups;
+        console.warn('[GroupPropertyEditor] Groups config:', groupsConfig);
+        if (groupsConfig?.schemaUrl) {
+            const response = await fetch(groupsConfig.schemaUrl);
+            this.schema = await response.json();
+            console.warn('[GroupPropertyEditor] Schema loaded from URL:', this.schema);
+        }
+        else if (groupsConfig?.schema) {
+            this.schema = groupsConfig.schema;
+            console.warn('[GroupPropertyEditor] Schema loaded from config:', this.schema);
+        }
+        else {
+            // Fallback: check in flatResources
+            const groupsResource = config.features?.ldapFlatGeneric?.flatResources?.find(r => r.pluralName === 'groups' || r.name === 'groups');
+            console.warn('[GroupPropertyEditor] Groups resource (flatResources):', groupsResource);
+            if (groupsResource?.schemaUrl) {
+                const response = await fetch(groupsResource.schemaUrl);
+                this.schema = await response.json();
+                console.warn('[GroupPropertyEditor] Schema loaded from URL (flatResources):', this.schema);
+            }
+            else if (groupsResource?.schema) {
+                this.schema = groupsResource.schema;
+                console.warn('[GroupPropertyEditor] Schema loaded from config (flatResources):', this.schema);
+            }
+            else {
+                // No schema configured - create a default schema from the group's attributes
+                console.warn('[GroupPropertyEditor] No schema configured, creating default schema from group attributes');
+                this.schema = this.createDefaultSchema();
+                console.warn('[GroupPropertyEditor] Default schema created:', this.schema);
+            }
+        }
+    }
+    createDefaultSchema() {
+        if (!this.group) {
+            return { entity: { objectClass: [] }, attributes: {} };
+        }
+        const attributes = {};
+        // Create schema attributes from the group's actual attributes
+        for (const [key, value] of Object.entries(this.group)) {
+            if (key === 'dn' || key === '*' || key === 'objectClass')
+                continue;
+            const isArray = Array.isArray(value);
+            attributes[key] = {
+                type: isArray ? 'array' : 'string',
+                required: false,
+                fixed: key === 'dn',
+            };
+        }
+        return {
+            entity: {
+                objectClass: Array.isArray(this.group.objectClass)
+                    ? this.group.objectClass
+                    : [this.group.objectClass],
+            },
+            attributes,
+        };
+    }
+    onSave(callback) {
+        this.saveCallback = callback;
+    }
+    render() {
+        if (!this.group)
+            return;
+        this.container.innerHTML = `
+      <div class="group-property-editor">
+        <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+          <span class="material-icons">group</span>
+          Edit Group
+        </h3>
+        <form id="group-edit-form">
+          ${this.renderFields()}
+          <div class="form-actions" style="margin-top: 24px; padding-top: 24px; border-top: 1px solid #e0e0e0; display: flex; gap: 12px; justify-content: space-between;">
+            <button type="button" id="move-group-btn" class="btn btn-secondary" style="background: #757575; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+              <span class="material-icons" style="font-size: 18px;">drive_file_move</span>
+              Move
+            </button>
+            <div style="display: flex; gap: 12px;">
+              <button type="button" id="delete-group-btn" class="btn btn-danger" style="background: #d32f2f; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+                <span class="material-icons" style="font-size: 18px;">delete</span>
+                Delete Group
+              </button>
+              <button type="submit" class="btn btn-primary" style="background: var(--primary-color, #6200ee); color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+                <span class="material-icons" style="font-size: 18px;">save</span>
+                Save Changes
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    `;
+    }
+    renderFields() {
+        if (!this.group || !this.schema) {
+            return '<div>Loading...</div>';
+        }
+        let html = '';
+        // Group fields by category
+        const basicFields = [];
+        const memberFields = [];
+        const mailFields = [];
+        for (const [fieldName, attribute] of Object.entries(this.schema.attributes)) {
+            if (attribute.fixed || fieldName === 'objectClass')
+                continue;
+            if (fieldName === 'member' || fieldName === 'owner') {
+                memberFields.push([fieldName, attribute]);
+            }
+            else if (fieldName.includes('mail') || fieldName.includes('Mail')) {
+                mailFields.push([fieldName, attribute]);
+            }
+            else {
+                basicFields.push([fieldName, attribute]);
+            }
+        }
+        // Basic Information
+        if (basicFields.length > 0) {
+            html +=
+                '<div class="field-group" style="margin-bottom: 20px; padding: 16px; background: #f9f9f9; border-radius: 4px;">';
+            html +=
+                '<div class="field-group-title" style="font-weight: 500; color: var(--primary-color, #6200ee); margin-bottom: 12px; font-size: 14px; text-transform: uppercase;">Basic Information</div>';
+            for (const [fieldName, attribute] of basicFields) {
+                html += this.renderField(fieldName, attribute);
+            }
+            html += '</div>';
+        }
+        // Email/Mailbox Settings
+        if (mailFields.length > 0) {
+            html +=
+                '<div class="field-group" style="margin-bottom: 20px; padding: 16px; background: #f9f9f9; border-radius: 4px;">';
+            html +=
+                '<div class="field-group-title" style="font-weight: 500; color: var(--primary-color, #6200ee); margin-bottom: 12px; font-size: 14px; text-transform: uppercase;">Email/Mailbox Settings</div>';
+            for (const [fieldName, attribute] of mailFields) {
+                html += this.renderField(fieldName, attribute);
+            }
+            html += '</div>';
+        }
+        // Members & Owners
+        if (memberFields.length > 0) {
+            html +=
+                '<div class="field-group" style="margin-bottom: 20px; padding: 16px; background: #f9f9f9; border-radius: 4px;">';
+            html +=
+                '<div class="field-group-title" style="font-weight: 500; color: var(--primary-color, #6200ee); margin-bottom: 12px; font-size: 14px; text-transform: uppercase;">Members & Owners</div>';
+            for (const [fieldName, attribute] of memberFields) {
+                html += this.renderField(fieldName, attribute);
+            }
+            html += '</div>';
+        }
+        return html;
+    }
+    renderField(fieldName, attribute) {
+        const value = this.group?.[fieldName];
+        const label = this.getFieldLabel(fieldName);
+        const required = attribute.required ? 'required' : '';
+        if (attribute.type === 'array') {
+            const arrayValue = Array.isArray(value) ? value.join('\n') : '';
+            // Special handling for member/owner fields with add/delete buttons
+            if (fieldName === 'member' || fieldName === 'owner') {
+                return `
+          <div class="form-group" style="margin-bottom: 16px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500;">${this.escapeHtml(label)}</label>
+            <div style="display: flex; gap: 8px; margin-bottom: 8px;">
+              <input type="text" id="${fieldName}-add-input" placeholder="Search DN or email..." style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" list="${fieldName}-suggestions" />
+              <datalist id="${fieldName}-suggestions"></datalist>
+              <button type="button" class="btn-add-${fieldName}" style="padding: 8px 16px; background: var(--primary-color, #6200ee); color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
+                <span class="material-icons" style="font-size: 16px;">add</span>
+                Add
+              </button>
+            </div>
+            <textarea name="${this.escapeHtml(fieldName)}" id="${fieldName}-list" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 120px; font-family: 'Roboto', sans-serif;" ${required}>${this.escapeHtml(arrayValue)}</textarea>
+            <div style="font-size: 12px; color: #666; margin-top: 4px;">
+              One DN per line. Type to search for users, or enter DN/email manually. Select a line and press Delete to remove.
+            </div>
+          </div>
+        `;
+            }
+            return `
+        <div class="form-group" style="margin-bottom: 16px;">
+          <label style="display: block; margin-bottom: 8px; font-weight: 500;">${this.escapeHtml(label)}</label>
+          <textarea name="${this.escapeHtml(fieldName)}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 80px; font-family: 'Roboto', sans-serif;" ${required}>${this.escapeHtml(arrayValue)}</textarea>
+          <div style="font-size: 12px; color: #666; margin-top: 4px;">Enter one value per line</div>
+        </div>
+      `;
+        }
+        if (attribute.type === 'number' || attribute.type === 'integer') {
+            return `
+        <div class="form-group" style="margin-bottom: 16px;">
+          <label style="display: block; margin-bottom: 8px; font-weight: 500;">${this.escapeHtml(label)}</label>
+          <input type="number" name="${this.escapeHtml(fieldName)}" value="${value || ''}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" ${required} />
+        </div>
+      `;
+        }
+        // String field
+        const type = fieldName.toLowerCase().includes('mail') ? 'email' : 'text';
+        return `
+      <div class="form-group" style="margin-bottom: 16px;">
+        <label style="display: block; margin-bottom: 8px; font-weight: 500;">${this.escapeHtml(label)}</label>
+        <input type="${type}" name="${this.escapeHtml(fieldName)}" value="${this.escapeHtml(String(value || ''))}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" ${required} />
+      </div>
+    `;
+    }
+    getFieldLabel(fieldName) {
+        const labelMap = {
+            cn: 'Group Name',
+            description: 'Description',
+            member: 'Members',
+            owner: 'Owners',
+            mail: 'Email Address',
+            twakeMailboxType: 'Mailbox Type',
+        };
+        return (labelMap[fieldName] ||
+            fieldName
+                .replace(/([A-Z])/g, ' $1')
+                .replace(/_/g, ' ')
+                .replace(/^./, str => str.toUpperCase()));
+    }
+    attachEventListeners() {
+        const form = document.getElementById('group-edit-form');
+        if (form) {
+            form.addEventListener('submit', e => this.handleSubmit(e));
+        }
+        const deleteBtn = document.getElementById('delete-group-btn');
+        if (deleteBtn) {
+            deleteBtn.addEventListener('click', () => this.handleDelete());
+        }
+        const moveBtn = document.getElementById('move-group-btn');
+        if (moveBtn) {
+            moveBtn.addEventListener('click', () => this.handleMove());
+        }
+        // Attach listeners for member/owner add buttons
+        const addMemberBtn = this.container.querySelector('.btn-add-member');
+        if (addMemberBtn) {
+            addMemberBtn.addEventListener('click', () => this.handleAddMember('member'));
+        }
+        const addOwnerBtn = this.container.querySelector('.btn-add-owner');
+        if (addOwnerBtn) {
+            addOwnerBtn.addEventListener('click', () => this.handleAddMember('owner'));
+        }
+        // Handle Delete key for removing members/owners
+        ['member', 'owner'].forEach(fieldName => {
+            const textarea = document.getElementById(`${fieldName}-list`);
+            if (textarea) {
+                textarea.addEventListener('keydown', e => {
+                    if (e.key === 'Delete') {
+                        this.handleDeleteMember(textarea, e);
+                    }
+                });
+            }
+            // Add autocomplete for member/owner inputs
+            const input = document.getElementById(`${fieldName}-add-input`);
+            if (input) {
+                let searchTimeout;
+                input.addEventListener('input', () => {
+                    clearTimeout(searchTimeout);
+                    searchTimeout = window.setTimeout(() => {
+                        this.searchUsers(input.value, fieldName);
+                    }, 300);
+                });
+            }
+        });
+    }
+    async searchUsers(query, fieldName) {
+        if (!query || query.length < 2)
+            return;
+        try {
+            // Search for users by CN, UID, or mail
+            const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/search?filter=(|(cn=*${encodeURIComponent(query)}*)(uid=*${encodeURIComponent(query)}*)(mail=*${encodeURIComponent(query)}*))`);
+            if (!response.ok)
+                return;
+            const results = await response.json();
+            const datalist = document.getElementById(`${fieldName}-suggestions`);
+            if (!datalist)
+                return;
+            datalist.innerHTML = results
+                .slice(0, 10)
+                .map((user) => {
+                const label = user.cn?.[0] || user.uid?.[0] || user.mail?.[0] || user.dn;
+                return `<option value="${this.escapeHtml(user.dn)}">${this.escapeHtml(label)}</option>`;
+            })
+                .join('');
+        }
+        catch (error) {
+            console.error('Failed to search users:', error);
+        }
+    }
+    async handleAddMember(fieldName) {
+        const input = document.getElementById(`${fieldName}-add-input`);
+        const textarea = document.getElementById(`${fieldName}-list`);
+        if (!input || !textarea)
+            return;
+        const valueToAdd = input.value.trim();
+        if (!valueToAdd) {
+            alert('Please enter a DN or email address');
+            return;
+        }
+        // Get current members/owners
+        const currentValues = textarea.value
+            .split('\n')
+            .map(v => v.trim())
+            .filter(v => v);
+        // Check if already exists
+        if (currentValues.includes(valueToAdd)) {
+            alert(`This ${fieldName} already exists`);
+            return;
+        }
+        // Add to list
+        currentValues.push(valueToAdd);
+        textarea.value = currentValues.join('\n');
+        // Clear input
+        input.value = '';
+        input.focus();
+    }
+    handleDeleteMember(textarea, e) {
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const value = textarea.value;
+        // Find the line(s) being selected
+        const lines = value.split('\n');
+        let currentPos = 0;
+        let startLine = 0;
+        let endLine = 0;
+        for (let i = 0; i < lines.length; i++) {
+            const lineLength = lines[i].length + 1; // +1 for newline
+            if (currentPos <= start && start < currentPos + lineLength) {
+                startLine = i;
+            }
+            if (currentPos <= end && end <= currentPos + lineLength) {
+                endLine = i;
+                break;
+            }
+            currentPos += lineLength;
+        }
+        // Remove selected lines
+        e.preventDefault();
+        const newLines = lines.filter((_, i) => i < startLine || i > endLine);
+        textarea.value = newLines.join('\n');
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        const form = e.target;
+        const formData = new FormData(form);
+        const updates = {};
+        for (const [key, value] of formData.entries()) {
+            if (this.schema?.attributes[key]?.type === 'array') {
+                updates[key] = value
+                    .split('\n')
+                    .map(v => v.trim())
+                    .filter(v => v);
+            }
+            else if (this.schema?.attributes[key]?.type === 'number' ||
+                this.schema?.attributes[key]?.type === 'integer') {
+                updates[key] = Number(value);
+            }
+            else {
+                updates[key] = value;
+            }
+        }
+        try {
+            // Check if cn has changed - if so, use rename API instead
+            if (updates.cn && this.group?.cn) {
+                const oldCn = Array.isArray(this.group.cn)
+                    ? this.group.cn[0]
+                    : this.group.cn;
+                const newCn = updates.cn;
+                if (oldCn !== newCn) {
+                    // Remove cn from updates
+                    delete updates.cn;
+                    // First rename the group
+                    await this.api.renameGroup(this.groupDn, newCn);
+                    // Update the groupDn for subsequent operations
+                    const newDn = this.groupDn.replace(new RegExp(`^cn=${oldCn},`), `cn=${newCn},`);
+                    this.groupDn = newDn;
+                    // If there are other updates, apply them to the renamed group
+                    if (Object.keys(updates).length > 0) {
+                        await this.api.updateGroup(this.groupDn, updates);
+                    }
+                }
+                else {
+                    // cn hasn't changed, just do a normal update
+                    await this.api.updateGroup(this.groupDn, updates);
+                }
+            }
+            else {
+                // No cn change, normal update
+                await this.api.updateGroup(this.groupDn, updates);
+            }
+            alert('Group updated successfully!');
+            if (this.saveCallback) {
+                this.saveCallback();
+            }
+        }
+        catch (error) {
+            console.error('Failed to update group:', error);
+            alert(`Failed to update group: ${error.message}`);
+        }
+    }
+    async handleMove() {
+        if (!this.group)
+            return;
+        // Get current organization DN from twakeDepartmentLink attribute
+        const currentOrgDn = this.group.twakeDepartmentLink;
+        if (!currentOrgDn) {
+            alert('Cannot move group: no organization link attribute found. This group may not support move operation.');
+            return;
+        }
+        // Extract group cn from DN
+        const cnMatch = this.groupDn.match(/^cn=([^,]+)/);
+        const cn = cnMatch ? cnMatch[1] : this.groupDn;
+        const modal = new MoveGroupModal(this.api, currentOrgDn, async (targetOrgDn) => {
+            try {
+                await this.api.moveGroup(cn, targetOrgDn);
+                alert('Group moved successfully!');
+                // Reload the group
+                await this.loadGroup();
+                this.render();
+                this.attachEventListeners();
+                if (this.saveCallback) {
+                    this.saveCallback();
+                }
+            }
+            catch (error) {
+                console.error('Failed to move group:', error);
+                alert(`Failed to move group: ${error.message}`);
+            }
+        });
+        await modal.show();
+    }
+    async handleDelete() {
+        if (!confirm(`Are you sure you want to delete this group?\n\n${this.groupDn}\n\nThis action cannot be undone.`)) {
+            return;
+        }
+        try {
+            await this.api.deleteEntry(this.groupDn);
+            alert('Group deleted successfully!');
+            this.container.innerHTML = `
+        <div class="empty-state">
+          <span class="material-icons">group</span>
+          <p>Group deleted. Select another group to edit.</p>
+        </div>
+      `;
+        }
+        catch (error) {
+            console.error('Failed to delete group:', error);
+            alert(`Failed to delete group: ${error.message}`);
+        }
+    }
+    escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+}
+
+/**
+ * Create Group Modal Component - Modal for creating a new group
+ */
+class CreateGroupModal {
+    constructor(api, config, orgDn, onCreated) {
+        this.modal = null;
+        this.api = api;
+        this.config = config;
+        this.orgDn = orgDn;
+        this.onCreated = onCreated;
+    }
+    async show() {
+        // Create modal backdrop
+        this.modal = document.createElement('div');
+        this.modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    `;
+        // Get organization path for the new group
+        const orgPath = await this.getOrgPath(this.orgDn);
+        // Create modal content
+        const modalContent = document.createElement('div');
+        modalContent.style.cssText = `
+      background: white;
+      border-radius: 8px;
+      padding: 24px;
+      max-width: 500px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    `;
+        modalContent.innerHTML = `
+      <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+        <span class="material-icons">group_add</span>
+        Create New Group
+      </h3>
+      <form id="create-group-form" style="display: flex; flex-direction: column; gap: 16px;">
+        <div>
+          <label for="group-cn" style="display: block; margin-bottom: 4px; font-weight: 500;">Group Name (cn) *</label>
+          <input type="text" id="group-cn" required pattern="[a-zA-Z][a-zA-Z0-9-]{0,254}"
+            style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
+            placeholder="e.g., developers" />
+          <small style="color: #666; font-size: 12px;">Must start with a letter, contain only letters, numbers, and hyphens</small>
+        </div>
+
+        <div>
+          <label for="group-mail" style="display: block; margin-bottom: 4px; font-weight: 500;">Email Address</label>
+          <input type="email" id="group-mail"
+            style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
+            placeholder="e.g., developers@example.com" />
+        </div>
+
+        <div>
+          <label for="group-description" style="display: block; margin-bottom: 4px; font-weight: 500;">Description</label>
+          <textarea id="group-description" rows="3"
+            style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"
+            placeholder="Group description..."></textarea>
+        </div>
+
+        <div style="padding: 12px; background: #f5f5f5; border-radius: 4px;">
+          <p style="margin: 0 0 8px 0; font-size: 14px; color: #666;">Organization:</p>
+          <p style="margin: 0; font-weight: 500;">${this.escapeHtml(orgPath || this.orgDn)}</p>
+        </div>
+
+        <div id="error-message" style="display: none; padding: 12px; background: #ffebee; border-radius: 4px; color: #c62828;"></div>
+
+        <div style="display: flex; gap: 12px; justify-content: flex-end;">
+          <button type="button" id="cancel-create-btn" style="padding: 10px 20px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer;">Cancel</button>
+          <button type="submit" style="padding: 10px 20px; background: var(--primary-color, #6200ee); color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+            <span class="material-icons" style="font-size: 18px;">group_add</span>
+            Create Group
+          </button>
+        </div>
+      </form>
+    `;
+        this.modal.appendChild(modalContent);
+        document.body.appendChild(this.modal);
+        // Attach event listeners
+        const cancelBtn = this.modal.querySelector('#cancel-create-btn');
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', () => this.close());
+        }
+        const form = this.modal.querySelector('#create-group-form');
+        if (form) {
+            form.addEventListener('submit', e => this.handleSubmit(e));
+        }
+        // Click outside to close
+        this.modal.addEventListener('click', e => {
+            if (e.target === this.modal) {
+                this.close();
+            }
+        });
+    }
+    async getOrgPath(orgDn) {
+        try {
+            const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/organizations/${encodeURIComponent(orgDn)}`);
+            if (!response.ok)
+                return null;
+            const org = await response.json();
+            const pathAttr = this.config.features?.organizations
+                ?.pathAttribute;
+            if (pathAttr && org[pathAttr]) {
+                return Array.isArray(org[pathAttr]) ? org[pathAttr][0] : org[pathAttr];
+            }
+            // If no path attribute, use the DN as fallback (for root organization)
+            return orgDn;
+        }
+        catch (error) {
+            console.error('Failed to load organization path:', error);
+            return null;
+        }
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        const cnInput = this.modal?.querySelector('#group-cn');
+        const mailInput = this.modal?.querySelector('#group-mail');
+        const descInput = this.modal?.querySelector('#group-description');
+        const errorDiv = this.modal?.querySelector('#error-message');
+        if (!cnInput)
+            return;
+        const cn = cnInput.value.trim();
+        if (!cn) {
+            this.showError(errorDiv, 'Group name is required');
+            return;
+        }
+        try {
+            // Get the group branch from config
+            // const groupBranch = this.config.ldap_groups_branch as string;
+            // const dn = `cn=${cn},${groupBranch}`;
+            // Get organization path for the group
+            const orgPath = await this.getOrgPath(this.orgDn);
+            // Build group data - only send cn, the backend will add objectClass, member, and default attributes
+            const groupData = {
+                cn: cn,
+            };
+            // Add optional fields
+            if (mailInput?.value.trim()) {
+                groupData.mail = mailInput.value.trim();
+            }
+            if (descInput?.value.trim()) {
+                groupData.description = descInput.value.trim();
+            }
+            // Add organization link and path (required for twake groups)
+            const linkAttr = this.config.features?.organizations
+                ?.linkAttribute;
+            const pathAttr = this.config.features?.organizations
+                ?.pathAttribute;
+            if (linkAttr && pathAttr) {
+                if (!orgPath) {
+                    this.showError(errorDiv, 'Failed to get organization path');
+                    return;
+                }
+                groupData[linkAttr] = this.orgDn;
+                groupData[pathAttr] = orgPath;
+            }
+            // Create the group using the proper API
+            const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/groups`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(groupData),
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(error || 'Failed to create group');
+            }
+            // Call success callback and close
+            await this.onCreated();
+            this.close();
+        }
+        catch (error) {
+            console.error('Failed to create group:', error);
+            this.showError(errorDiv, error.message);
+        }
+    }
+    showError(errorDiv, message) {
+        if (errorDiv) {
+            errorDiv.textContent = `Error: ${message}`;
+            errorDiv.style.display = 'block';
+        }
+    }
+    close() {
+        if (this.modal) {
+            document.body.removeChild(this.modal);
+            this.modal = null;
+        }
+    }
+    escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+}
+
+/**
+ * LDAP Group Editor - Main class for editing group properties
+ * @author Xavier Guimard
+ */
+class LdapGroupEditor {
+    constructor(options) {
+        this.container = null;
+        this.groupTree = null;
+        this.groupEditor = null;
+        this.currentGroupDn = null;
+        this.currentOrgDn = null;
+        this.config = null;
+        this.options = {
+            apiBaseUrl: typeof window !== 'undefined' ? window.location.origin : '',
+            ...options,
+        };
+        this.api = new GroupApiClient(this.options.apiBaseUrl || '');
+    }
+    async init() {
+        this.container = document.getElementById(this.options.containerId);
+        if (!this.container) {
+            throw new Error(`Container #${this.options.containerId} not found`);
+        }
+        // Load config first
+        this.config = await this.api.getConfig();
+        this.render();
+        await this.initComponents();
+    }
+    render() {
+        if (!this.container)
+            return;
+        this.container.innerHTML = `
+      <div class="ldap-group-editor">
+        <div class="editor-layout">
+          <div id="group-tree-container" class="demo-panel"></div>
+          <div id="group-editor-container" class="demo-panel">
+            <div class="empty-state">
+              <span class="material-icons">group</span>
+              <p>Select a group from the tree to edit its properties</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async initComponents() {
+        const treeContainer = document.getElementById('group-tree-container');
+        if (!treeContainer)
+            return;
+        this.groupTree = new GroupTree(treeContainer, this.options.apiBaseUrl || window.location.origin, orgDn => this.onOrgSelected(orgDn));
+        try {
+            await this.groupTree.init();
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    async onOrgSelected(orgDn) {
+        const editorContainer = document.getElementById('group-editor-container');
+        if (!editorContainer)
+            return;
+        this.currentOrgDn = orgDn;
+        try {
+            // Load groups for this organization
+            const groups = await this.api.getGroups(orgDn);
+            // Show list of groups with create button
+            editorContainer.innerHTML = `
+        <div style="padding: 20px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+            <h3 style="margin: 0;">Groups</h3>
+            <button type="button" id="create-group-btn" style="padding: 8px 16px; background: var(--primary-color, #6200ee); color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+              <span class="material-icons" style="font-size: 18px;">group_add</span>
+              Create
+            </button>
+          </div>
+          ${groups.length === 0
+                ? `
+            <div class="empty-state">
+              <span class="material-icons">group</span>
+              <p>No groups in this organization</p>
+            </div>
+          `
+                : `
+            <div style="display: flex; flex-direction: column; gap: 8px;">
+              ${groups
+                    .map(group => `
+                <div class="group-item" data-dn="${this.escapeHtml(group.dn)}" style="padding: 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+                  <span class="material-icons">group</span>
+                  <span>${this.escapeHtml(group.cn || group.dn)}</span>
+                </div>
+              `)
+                    .join('')}
+            </div>
+          `}
+        </div>
+      `;
+            // Attach click handlers for group items
+            editorContainer.querySelectorAll('.group-item').forEach(item => {
+                item.addEventListener('click', () => {
+                    const groupDn = item.dataset.dn;
+                    this.onGroupSelected(groupDn);
+                });
+            });
+            // Attach click handler for create button
+            const createBtn = editorContainer.querySelector('#create-group-btn');
+            if (createBtn) {
+                createBtn.addEventListener('click', () => this.handleCreateGroup());
+            }
+        }
+        catch (error) {
+            this.handleError(error);
+            editorContainer.innerHTML = `
+        <div class="empty-state">
+          <span class="material-icons">error</span>
+          <p>Failed to load groups</p>
+        </div>
+      `;
+        }
+    }
+    async onGroupSelected(groupDn) {
+        const editorContainer = document.getElementById('group-editor-container');
+        if (!editorContainer)
+            return;
+        this.currentGroupDn = groupDn;
+        try {
+            // Show group property editor
+            this.groupEditor = new GroupPropertyEditor(editorContainer, this.api, groupDn);
+            await this.groupEditor.init();
+            // Notify parent
+            if (this.options.onGroupSaved) {
+                this.groupEditor.onSave(() => {
+                    this.options.onGroupSaved?.(groupDn);
+                });
+            }
+        }
+        catch (error) {
+            this.handleError(error);
+            editorContainer.innerHTML = `
+        <div class="empty-state">
+          <span class="material-icons">error</span>
+          <p>Failed to load group properties</p>
+        </div>
+      `;
+        }
+    }
+    async handleCreateGroup() {
+        if (!this.currentOrgDn || !this.config)
+            return;
+        const modal = new CreateGroupModal(this.api, this.config, this.currentOrgDn, async () => {
+            // Refresh the group list after creation
+            await this.onOrgSelected(this.currentOrgDn);
+            if (this.options.onGroupSaved) {
+                this.options.onGroupSaved('');
+            }
+        });
+        await modal.show();
+    }
+    escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+    handleError(error) {
+        console.error('LdapGroupEditor error:', error);
+        if (this.options.onError) {
+            this.options.onError(error);
+        }
+    }
+    // Public API
+    getApi() {
+        return this.api;
+    }
+    getConfig() {
+        return this.config;
+    }
+    getCurrentOrgDn() {
+        return this.currentOrgDn;
+    }
+    getCurrentUserDn() {
+        // For compatibility with HTML that calls getCurrentUserDn
+        return this.currentGroupDn;
+    }
+    async createUser(data) {
+        // For compatibility - actually creates a group
+        return this.api.createEntry(data.dn, data);
+    }
+    async deleteUser(dn) {
+        // For compatibility - actually deletes a group
+        return this.api.deleteEntry(dn);
+    }
+}
+
+export { LdapGroupEditor };
+//# sourceMappingURL=ldap-group-editor.esm.js.map