            <div class="form-group">
                <tmpl_if name="edit_disabled">
                    <label for="parent_domain_id" class="col-sm-3 control-label">{tmpl_var name='parent_domain_id_txt'}</label>
                    <div class="col-sm-9"><select name="parent_domain_id" id="parent_domain_id" class="form-control" disabled="disabled">
                        {tmpl_var name='parent_domain_id'}
                    </select></div>
                    <input type="hidden" name="parent_domain_id" value="{tmpl_var name='parent_domain_id_value'}" />
                <tmpl_else>
                        <label for="parent_domain_id" class="col-sm-3 control-label">{tmpl_var name='parent_domain_id_txt'}</label>
                        <div class="col-sm-9"><select name="parent_domain_id" id="parent_domain_id" class="form-control">
                            {tmpl_var name='parent_domain_id'}
                        </select></div>
                </tmpl_if>
            </div>
			<div class="form-group">
                <label for="username" class="col-sm-3 control-label">{tmpl_var name='username_txt'}</label>
                <div class="col-sm-9">
					<div class="input-group">
						<span class="input-group-addon" id="username-desc">{tmpl_var name='username_prefix'}</span>
						<input type="text" name="username" id="username" value="{tmpl_var name='username'}" class="form-control" aria-describedby="username-desc" style="width: 90%" />
						<a class="btn btn-default formbutton-narrow" href="javascript: navigator.clipboard.writeText(document.getElementById('username-desc').innerText + document.getElementById('username').value);" title="{tmpl_var name='copy_to_clipboard_txt'}">
							<span class="fa fa-clone"></span>
						</a>

					</div>
				</div>
            </div>
			<tmpl_if name="ssh_authentication" op="!=" value="key">
			<div class="form-group">
                <label for="password" class="col-sm-3 control-label">{tmpl_var name='password_txt'}</label>
                <div class="col-sm-9">
				<div class="input-group">
					<input type="password" name="password" id="password" value="{tmpl_var name='password'}" class="form-control" autocomplete="off" onkeyup="pass_check(this.value);checkPassMatch('password','repeat_password');" />
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" onclick="generatePassword('password','repeat_password');">{tmpl_var name='generate_password_txt'}</button>
					</span>
				</div>
				</div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{tmpl_var name='password_strength_txt'}</label>
                <div class="col-sm-9 checkbox">
                <div id="passBar"></div>
                <span id="passText">&nbsp;</span>
                </div>
            </div>
            <div class="form-group">
                <label for="repeat_password" class="col-sm-3 control-label">{tmpl_var name='repeat_password_txt'}</label>
                <div class="col-sm-9"><input type="password" name="repeat_password" id="repeat_password" value="" class="form-control" autocomplete="off" onkeyup="checkPassMatch('password','repeat_password');" /></div></div>
            <div class="form-group">
				<div class="col-sm-offset-3 col-sm-9">
					<div id="confirmpasswordError" style="display:none;" class="confirmpassworderror">{tmpl_var name='password_mismatch_txt'}</div>
					<div id="confirmpasswordOK" style="display:none;" class="confirmpasswordok">{tmpl_var name='password_match_txt'}</div>
				</div>
			</div>
			</tmpl_if>
            <div class="form-group">
                <label for="chroot" class="col-sm-3 control-label">{tmpl_var name='chroot_txt'}</label>
                <div class="col-sm-9"><select name="chroot" id="chroot" class="form-control">
                    {tmpl_var name='chroot'}
                </select></div>
            </div>
            <div class="form-group">
                <label for="quota_size" class="col-sm-3 control-label">{tmpl_var name='quota_size_txt'}</label>
                <div class="col-sm-9"><div class="input-group"><input type="text" name="quota_size" id="quota_size" value="{tmpl_var name='quota_size'}" class="form-control" aria-describedby="quota_size-desc" /><span class="input-group-addon" id="quota_size-desc">MB</span></div></div>
            </div>
			<tmpl_if name="ssh_authentication" op="!=" value="password">
            <div class="form-group">
                <label for="ssh_rsa" class="col-sm-3 control-label">{tmpl_var name='ssh_rsa_txt'}
                    <button onclick="toggleView(); return false;">Toggle View</button>
                </label>
                <div class="col-sm-9"><textarea class="form-control" name="ssh_rsa" id="ssh_rsa" rows="10" cols="30">{tmpl_var name='ssh_rsa'}</textarea>

                    <div id="sshWidgetContainer"></div>

                    <div id="addKeyContainer" class="input-group col-sm-9" >
                        <input type="text" id="newSSHKey" placeholder="Enter new SSH key"  class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="addNewKey(); return false;">Add Key</button>
                        </span>
                    </div>
                </div>
            </div>
			</tmpl_if>
            <div class="form-group">
                <label class="col-sm-3 control-label">{tmpl_var name='active_txt'}</label>
                <div class="col-sm-9">
                    {tmpl_var name='active'}
                </div>
            </div>
        

        <input type="hidden" name="id" value="{tmpl_var name='id'}">

        <div class="clear"><div class="right">
            <button class="btn btn-default formbutton-success" type="button" value="{tmpl_var name='btn_save_txt'}" data-submit-form="pageForm" data-form-action="sites/shell_user_edit.php">{tmpl_var name='btn_save_txt'}</button>
            <button class="btn btn-default formbutton-default" type="button" value="{tmpl_var name='btn_cancel_txt'}" data-load-content="sites/shell_user_list.php">{tmpl_var name='btn_cancel_txt'}</button>
        </div></div>

<script>
    function createSSHWidget(type, comment, optionsString, index, textarea) {
        const widget = document.createElement('div');
        widget.classList.add('ssh-widget');
        widget.textContent = `${type}, ${comment}`;
        // Add a data attribute to the widget for later identification
        widget.setAttribute('data-index', index);

        // Add a options span to the widget
        if (optionsString != '') {
            widget.appendChild(document.createElement('br'));
            const optionsSpan = document.createElement('span');
            optionsSpan.textContent = `Options: ${optionsString}`;
            widget.appendChild(optionsSpan);
        }

        // Add a delete icon to the widget
        const deleteIcon = document.createElement('i');
        deleteIcon.classList.add('fa', 'fa-trash', 'delete-icon');
        deleteIcon.addEventListener('click', () => deleteRow(index));
        widget.appendChild(deleteIcon);

        // Add a copy icon to the widget
        const copyIcon = document.createElement('i');
        copyIcon.classList.add('fa', 'fa-copy', 'copy-icon');
        copyIcon.addEventListener('click', () => copyToClipboard(index, textarea));
        widget.appendChild(copyIcon);

        // Add a tooltip to show the full pubkey on hover
        const fullPubkeyTooltip = document.createElement('div');
        fullPubkeyTooltip.classList.add('full-pubkey-tooltip');
        fullPubkeyTooltip.textContent = textarea.value.trim().split('\n')[index];
        widget.appendChild(fullPubkeyTooltip);

        return widget;
    }

    function convertToWidget() {
        const textarea = document.getElementById('ssh_rsa');
        const widgetContainer = document.getElementById('sshWidgetContainer');
        widgetContainer.innerHTML = ''; // Clear existing widgets

        const publicKeys = textarea.value.trim().split('\n');
        for (let i = 0; i < publicKeys.length; i++) {
            const publicKeyLine = publicKeys[i].trim();

            // Skip empty lines and comments
            if (publicKeyLine === '' || publicKeyLine.startsWith('#')) {
                continue;
            }

            // Split the line into parts
            const parts = publicKeyLine.split(/\s+/);

            // Extract options and public key
            let options = [];
            let publicKey = '';
            let publicKeyIndex = 0;

            for (let j = 0; j < parts.length; j++) {
                if (parts[j].includes('=')) {
                    options.push(parts[j]);
                } else {
                    publicKey = parts[j];
                    publicKeyIndex = j;
                    break;
                }
            }

            // Combine the options into a string
            const optionsString = options.join(' ');

            // Extract the type and comment from the public key
            const type = publicKey.split(/\s+/)[0];

            const comment = parts.slice(publicKeyIndex + 2).join(' '); // Handle comments with spaces

            // Create the widget
            const widget = createSSHWidget(type, comment, optionsString, i, textarea);
            widgetContainer.appendChild(widget);
        }
    }

    function toggleView() {
        const textarea = document.getElementById('ssh_rsa');
        const widgetContainer = document.getElementById('sshWidgetContainer');
        const addKeyContainer = document.getElementById('addKeyContainer');

        if (textarea.style.display == "" || textarea.style.display === 'block') {
            // Switching to widget view
            textarea.style.display = 'none';
            widgetContainer.style.display = 'block';
            addKeyContainer.style.display = 'block';
        } else {
            // Switching to textarea view
            textarea.style.display = 'block';
            widgetContainer.style.display = 'none';
            addKeyContainer.style.display = 'none';
        }
    }

    function deleteRow(index) {
        const textarea = document.getElementById('ssh_rsa');
        const widgetContainer = document.getElementById('sshWidgetContainer');

        // Delete the corresponding row from the textarea
        const publicKeys = textarea.value.trim().split('\n');
        publicKeys.splice(index, 1);
        textarea.value = publicKeys.join('\n');

        // Update the widget display
        convertToWidget();
    }

    function addNewKey() {
        const textarea = document.getElementById('ssh_rsa');
        const newSSHKeyInput = document.getElementById('newSSHKey');

        // Append the new key to the textarea
        textarea.value += '\n' + newSSHKeyInput.value;

        // Update the widget display
        convertToWidget();

        // Clear the input field
        newSSHKeyInput.value = '';
    }

    function copyToClipboard(index, textarea) {
    const fullPubkey = textarea.value.trim().split('\n')[index];
    navigator.clipboard.writeText(fullPubkey).then(() => {
        alert('Public key copied to clipboard!');
    }).catch((error) => {
        console.error('Unable to copy to clipboard', error);
    });
    }


    // Call the function initially to convert the existing textarea content
    convertToWidget();
    toggleView();

    // Attach an event listener to dynamically update the widgets when textarea content changes
    document.getElementById('ssh_rsa').addEventListener('input', convertToWidget);
</script>


    <style>
        /* Add your custom styling here */
        .ssh-widget {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            position: relative;
            cursor: pointer;
        }

        .delete-icon {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
            color: #888;
        }

        .copy-icon {
            position: absolute;
            top: 5px;
            right: 30px;
            cursor: pointer;
            color: #888;
        }

        .full-pubkey-tooltip {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            display: none;
            z-index: 3;
        }

        .ssh-widget:hover .full-pubkey-tooltip {
            display: block;
        }

        #addKeyContainer {
            display: none;
        }
        #newSSHKey {
            width: 80%;
        }
    </style>
