<!-- Background Overlay -->
<div id="modal-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div>

<!-- Delete Confirmation Modal -->
<div id="popup-modal" 
    tabindex="-1" 
    role="dialog"
    aria-labelledby="modal-title"
    class="fixed inset-0 z-50 flex justify-center items-center w-full h-full hidden">
    <div class="relative p-4 w-full max-w-md max-h-full" role="document">
        <!-- Modal content -->
        <div class="relative flex max-w-lg flex-col overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
            <!-- Modal header -->
            <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
                <h3 class="font-semibold tracking-wide text-neutral-900 dark:text-white">
                    Delete Confirmation
                </h3>
                <button type="button" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 text-center">
                <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                </svg>
                <p class="mb-5 font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete <span id="identity-to-delete"></span>?</p>
            </div>
            <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
                <button id="confirm-delete" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-red-600 px-4 py-2 text-center text-sm font-medium tracking-wide text-white transition hover:bg-red-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 active:opacity-100 active:outline-offset-0">Yes, I'm sure</button>
                <button data-modal-hide="popup-modal" type="button" class="cursor-pointer whitespace-nowrap rounded-md px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-600 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:text-neutral-300 dark:focus-visible:outline-yellow-500">No, cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- Add User Modal -->
<div id="add-user-modal" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-50 flex justify-center items-center w-full h-full">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative flex max-w-lg flex-col overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
            <!-- Modal header -->
            <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
                <h3 class="font-semibold tracking-wide text-neutral-900 dark:text-white">
                    Add New User
                </h3>
                <button type="button" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="add-user-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <form id="add-user-form">
                <div class="p-4 space-y-4">
                    <div>
                        <label for="user-base-dn" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Base DN</label>
                        <input type="text" name="user-base-dn" id="user-base-dn" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Enter Base DN" required />
                    </div>
                    <div>
                        <label for="new-username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Username</label>
                        <input type="text" name="new-username" id="new-username" class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white placeholder-neutral-400" placeholder="Enter username" required />
                    </div>
                    <div>
                        <label for="new-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
                        <input type="password" name="new-password" id="new-password" placeholder="Enter password" class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white placeholder-neutral-400" required />
                    </div>
                </div>
                <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
                    <button type="submit" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-yellow-500 dark:text-black dark:focus-visible:outline-yellow-500">Add User</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Computer Modal -->
<div id="add-computer-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modal-title"
    class="fixed inset-0 z-50 flex justify-center items-center w-full h-full hidden">
    <div class="relative p-4 w-full max-w-md max-h-full" role="document">
        <!-- Modal content -->
        <div class="relative flex max-w-lg flex-col overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
            <!-- Modal header -->
            <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
                <h3 class="font-semibold tracking-wide text-neutral-900 dark:text-white">
                    Add New Computer
                </h3>
                <button type="button" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="add-computer-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <form id="add-computer-form">
                <div class="p-4 space-y-4">
                    <div>
                        <label for="computer-base-dn" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Base DN</label>
                        <input type="text" name="computer-base-dn" id="computer-base-dn" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Enter Base DN" required />
                    </div>
                    <div>
                        <label for="new-computername" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Computer Name</label>
                        <input type="text" name="new-computername" id="new-computername" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Enter computer name" required />
                    </div>
                    <div>
                        <label for="new-computerpass" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Computer Password</label>
                        <input type="password" name="new-computerpass" id="new-computerpass" placeholder="Enter computer password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
                    </div>
                </div>
                <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
                    <button type="submit" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-yellow-500 dark:text-black dark:focus-visible:outline-yellow-500">Add Computer</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add DNS Record Modal -->
<div id="add-dns-record-modal" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-50 flex justify-center items-center w-full h-full">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative flex max-w-lg flex-col overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
            <!-- Modal header -->
            <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
                <h3 class="font-semibold tracking-wide text-neutral-900 dark:text-white">
                    Add DNS Record
                </h3>
                <button type="button" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="add-dns-record-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <form id="add-dns-record-form">
                <div class="p-4 space-y-4">
                    <div>
                        <label for="dns-zone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Zone</label>
                        <select id="dns-zone" name="dns-zone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required>
                        </select>
                    </div>
                    <div>
                        <label for="new-dns-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Record Name</label>
                        <input type="text" 
                            name="new-dns-name" 
                            id="new-dns-name" 
                            class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white placeholder-neutral-400" 
                            placeholder="Enter DNS name" 
                            required />
                    </div>
                    <div>
                        <label for="new-dns-address" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Record Address</label>
                        <input type="text" 
                            name="new-dns-address" 
                            id="new-dns-address" 
                            class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white placeholder-neutral-400" 
                            placeholder="Enter DNS address" 
                            required />
                    </div>
                </div>
                <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
                    <button type="submit" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-yellow-500 dark:text-black dark:focus-visible:outline-yellow-500">Add Record</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- LDAP Attributes Modal -->
<div id="ldap-attributes-modal" 
    tabindex="-1" 
    role="dialog"
    aria-modal="true"
    aria-labelledby="ldap-attributes-title"
    class="hidden fixed inset-0 z-50 flex justify-center items-center w-full h-full">
    <div class="relative p-4 w-full max-w-6xl h-[90vh]">
        <!-- Modal content -->
        <div class="relative flex flex-col h-full rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
            {% include 'views/spinner.html' %}

            <!-- Modal header - fixed -->
            <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
                <h3 class="font-semibold tracking-wide text-neutral-900 dark:text-white">
                    LDAP Attributes
                </h3>
                <button type="button" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="ldap-attributes-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>

            <!-- Tabs -->
            <div class="flex justify-between items-center gap-2 overflow-x-auto border-b border-neutral-300 dark:border-neutral-700" role="tablist" aria-label="tab options">
                <div class="flex gap-2">
                    <button onclick="selectModalTab('info')" aria-selected="true" tabindex="0" 
                        class="h-min px-4 py-2 text-sm font-bold text-black border-b-2 border-black dark:border-yellow-500 dark:text-yellow-500" 
                        type="button" role="tab" aria-controls="tabpanelInfo">Info</button>
                    <button onclick="selectModalTab('descendants')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelDescendants">Descendants</button>
                    <button onclick="selectModalTab('dacl')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelDacl">DACL</button>
                    <button onclick="selectModalTab('members')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelMembers"
                        style="display: none;">Members</button>
                    <button onclick="selectModalTab('sessions')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelSessions"
                        style="display: none;">Sessions</button>
                    <button onclick="selectModalTab('loggedon')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelLoggedon"
                        style="display: none;">Logon Users</button>
                    <button onclick="selectModalTab('memberof')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelMemberof"
                        style="display: none;">Member Of</button>
                    <button onclick="selectModalTab('shares')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelShares"
                        style="display: none;">Shares</button>
                    <button onclick="selectModalTab('owner')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelOwner">Owner</button>
                    <button onclick="selectModalTab('services')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelServices"
                        style="display: none;">Services</button>
                </div>
                <!-- Search Bar -->
                <div class="relative flex items-center px-1">
                    <input type="text" id="modal-tab-search" 
                        class="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 text-sm 
                        text-neutral-900 dark:text-neutral-300 dark:hover:text-neutral-400 hover:text-neutral-900 
                        focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black 
                        dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-yellow-500" 
                        placeholder="Filter results...">
                    <button class="clear-input absolute inset-y-0 right-0 px-2 text-neutral-600 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-neutral-400 focus:outline-none">
                        <i class="fa-solid fa-xmark fa-xs p-1"></i>
                    </button>
                </div>
            </div>

            <!-- Tab Content -->
            <div class="flex-1 overflow-y-auto scrollbar">
                <div id="modal-content-spinner" class="hidden absolute inset-0 bg-black/50 flex justify-center items-center z-50">
                    <div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-solid border-yellow-400 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" role="status">
                        <span class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Loading...</span>
                    </div>
                </div>
                <!-- Info Tab -->
                <div id="tabpanelInfo" role="tabpanel" aria-label="info" class="p-4" style="display: block;">
                    <form id="ldap-attributes-form" class="space-y-4">
                        <!-- Existing Attributes Section -->
                        <div id="existing-attributes" class="space-y-4">
                            <!-- Attribute entries will be dynamically added here -->
                        </div>

                        <!-- Add New Attribute Section -->
                        <div class="mt-8 pt-4 border-t border-neutral-300 dark:border-neutral-700">
                            <h4 class="text-lg font-medium mb-4 text-neutral-900 dark:text-white">Add New Attribute</h4>
                            <div class="flex gap-4">
                                <div class="flex-1">
                                    <label for="new-attribute-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Attribute Name</label>
                                    <input type="text" id="new-attribute-name" class="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-yellow-500 w-full whitespace-pre" placeholder="Enter attribute name">
                                </div>
                                <div class="flex-1">
                                    <label for="new-attribute-value" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Attribute Value</label>
                                    <input type="text" id="new-attribute-value" class="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-yellow-500 w-full whitespace-pre" placeholder="Enter attribute value">
                                </div>
                                <div class="flex items-end">
                                    <button type="button" id="add-new-attribute" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-yellow-500 dark:text-black dark:focus-visible:outline-yellow-500">Add</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Descendants Tab -->
                <div id="tabpanelDescendants" role="tabpanel" aria-label="descendants" class="p-4" style="display: none;">
                    <!-- Add Filter Section -->
                    <div class="mb-4 p-4 border border-neutral-300 dark:border-neutral-700 rounded-md">
                        <div class="flex items-center gap-4">
                            <div class="flex-grow">
                                <label class="block text-sm font-medium mb-2">Select Properties</label>
                                <div class="flex gap-2 flex-wrap" id="selected-properties">
                                    <span class="px-2 py-1 bg-neutral-100 dark:bg-neutral-800 rounded-md text-sm flex items-center gap-1">
                                        name
                                        <button class="hover:text-red-500"><i class="fas fa-times fa-xs"></i></button>
                                    </span>
                                    <span class="px-2 py-1 bg-neutral-100 dark:bg-neutral-800 rounded-md text-sm flex items-center gap-1">
                                        distinguishedName
                                        <button class="hover:text-red-500"><i class="fas fa-times fa-xs"></i></button>
                                    </span>
                                </div>
                            </div>
                            <div class="flex items-end gap-2">
                                <input type="text" id="new-property" 
                                    class="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-yellow-500" 
                                    placeholder="Add property">
                                <button id="search-filter" 
                                    class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-yellow-500 dark:text-black dark:focus-visible:outline-yellow-500">
                                    Search
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- Table remains the same -->
                    <table class="w-full text-sm text-neutral-600 dark:text-neutral-300 text-left">
                        <thead id="descendants-header">
                            <!-- Headers will be dynamically generated -->
                        </thead>
                        <tbody id="descendants-rows">
                            <!-- Rows will be dynamically generated -->
                        </tbody>
                    </table>
                </div>
                <!-- Add this after the Descendants tab panel -->
                <div id="tabpanelDacl" role="tabpanel" aria-label="dacl" class="p-4" style="display: none;">
                    <div class="mb-4 flex justify-end">
                        <button type="button" 
                            onclick="openAddObjectAclModal()"
                            class="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-neutral-800 dark:bg-yellow-500 dark:text-black dark:hover:bg-yellow-600">
                            <i class="fas fa-plus fa-sm"></i>
                            Add ACL
                        </button>
                    </div>
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="h-8 text-left text-neutral-600 dark:text-neutral-400">
                                <th class="px-3 py-2">Type</th>
                                <th class="px-3 py-2">Principal</th>
                                <th class="px-3 py-2">Access</th>
                                <th class="px-3 py-2">Inherited From</th>
                                <th class="px-3 py-2">Applies to</th>
                            </tr>
                        </thead>
                        <tbody id="modal-dacl-rows" class="divide-y divide-neutral-200 dark:divide-neutral-700">
                            <!-- DACL rows will be dynamically populated -->
                        </tbody>
                    </table>
                </div>
                <!-- In modal.html, add this after the DACL tab panel -->
                <div id="tabpanelMembers" role="tabpanel" aria-label="members" class="p-4" style="display: none;">
                    <div id="modal-members-content">
                        <!-- Members content will be dynamically populated -->
                    </div>
                </div>
                <div id="tabpanelSessions" role="tabpanel" aria-label="sessions" class="p-4 relative" style="display: none;">
                    <div id="sessions-tab-spinner" class="hidden absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center z-10">
                        <!-- Same spinner SVG as above -->
                    </div>
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="h-8 text-left text-neutral-600 dark:text-neutral-400">
                                <th class="px-3 py-2">Username</th>
                                <th class="px-3 py-2">Client</th>
                                <th class="px-3 py-2">Connected</th>
                                <th class="px-3 py-2">Idle Time</th>
                                <th class="px-3 py-2 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="sessions-rows" class="divide-y divide-neutral-200 dark:divide-neutral-700">
                            <!-- Sessions will be dynamically populated -->
                        </tbody>
                    </table>
                </div>
                <div id="tabpanelLoggedon" role="tabpanel" aria-label="loggedon" class="p-4 relative" style="display: none;">
                    <div id="loggedon-tab-spinner" class="hidden absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center z-10">
                        <!-- Same spinner SVG as above -->
                    </div>
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="h-8 text-left text-neutral-600 dark:text-neutral-400">
                                <th class="px-3 py-2">Username</th>
                                <th class="px-3 py-2">Logon Type</th>
                                <th class="px-3 py-2">Authentication</th>
                                <th class="px-3 py-2">Last Logon</th>
                            </tr>
                        </thead>
                        <tbody id="logonusers-rows" class="divide-y divide-neutral-200 dark:divide-neutral-700">
                            <!-- Logon users will be dynamically populated -->
                        </tbody>
                    </table>
                </div>
                <div id="tabpanelMemberof" role="tabpanel" aria-label="memberof" class="p-4" style="display: none;">
                    <div id="modal-memberof-content">
                        <table class="w-full text-sm border-collapse">
                            <thead>
                                <tr class="h-8 text-left text-neutral-600 dark:text-neutral-400">
                                    <th class="px-3 py-2">Name</th>
                                    <th class="px-3 py-2">Distinguished Name</th>
                                </tr>
                            </thead>
                            <tbody id="memberof-rows" class="divide-y divide-neutral-200 dark:divide-neutral-700">
                                <!-- Member Of rows will be dynamically populated -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- Shares Tab -->
                <div id="tabpanelShares" role="tabpanel" aria-label="shares" class="p-4 relative" style="display: none;">
                    <div id="shares-tab-spinner" class="hidden absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center z-10">
                        <!-- Same spinner SVG as above -->
                    </div>
                    <div class="flex flex-col h-full">
                        <!-- Connection Controls -->
                        <div class="flex items-center justify-between mb-4">
                            <div id="smb-connection-status">
                                <!-- Status will be dynamically updated -->
                            </div>
                            <div class="flex items-center gap-2">
                                <!-- Connect As Form (initially hidden) -->
                                <div id="connect-as-form" class="hidden flex items-center gap-2">
                                    <input type="text" id="smb-username" 
                                        placeholder="Username" 
                                        class="px-2 py-1 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white">
                                    <input type="password" id="smb-password" 
                                        placeholder="Password" 
                                        class="px-2 py-1 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white">
                                </div>
                                
                                <!-- Computer Input -->
                                <input type="text" id="smb-computer" 
                                    placeholder="Computer" 
                                    class="w-64 px-2 py-1 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white">
                                
                                <!-- Connect As Button -->
                                <button id="smb-connect-as-button" type="button" 
                                    class="inline-flex items-center gap-1.5 rounded-md bg-neutral-100 px-3 py-1.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700">
                                    <i class="fas fa-user-shield fa-sm"></i>
                                    Connect As
                                </button>

                                <!-- Connect Button -->
                                <button id="smb-connect-button" type="button" 
                                    class="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-neutral-800 dark:bg-yellow-500 dark:text-black dark:hover:bg-yellow-600">
                                    <i class="fas fa-plug fa-sm"></i>
                                    Connect
                                </button>
                            </div>
                        </div>

                        <!-- Tree View Container -->
                        <div class="flex-1 border border-neutral-200 dark:border-neutral-700 rounded-md overflow-hidden">
                            <div id="smb-tree" class="p-4 overflow-auto max-h-[500px] scrollbar">
                                <!-- Tree view will be dynamically populated -->
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tabpanelOwner" role="tabpanel" aria-label="owner" class="p-4" style="display: none;">
                    <div class="flex items-center justify-between mb-4">
                        <div id="owner-info" class="flex-1">
                            <!-- Owner info will be dynamically populated -->
                        </div>
                        <button type="button" 
                            id="change-owner-button"
                            class="text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400 p-1 rounded-md hover:bg-green-50 dark:hover:bg-green-950/50 transition-colors">
                            <i class="fas fa-user-shield"></i>
                        </button>
                    </div>
                </div>
                <!-- Services Tab -->
                <div id="tabpanelServices" role="tabpanel" aria-label="services" class="p-4 relative" style="display: none;">
                    <!-- Add spinner overlay -->
                    <div id="services-tab-spinner" class="hidden absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center z-10">
                        <div role="status">
                            <svg aria-hidden="true" class="inline w-10 h-10 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
                            </svg>
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>

                    <!-- Header with Add Button -->
                    <div class="flex justify-between items-center mb-4">
                        <div class="flex items-center gap-4">
                            <select id="service-status-filter" class="px-2 py-1 text-sm bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-neutral-700 dark:text-neutral-300">
                                <option value="ALL">All Services</option>
                                <option value="RUNNING">Running Only</option>
                                <option value="STOPPED">Stopped Only</option>
                            </select>
                            <span class="text-sm font-medium text-neutral-600 dark:text-neutral-400">
                                <span id="services-count">0</span> services found
                            </span>
                        </div>
                        <button id="toggle-add-service-form" class="p-2 text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-950/50 rounded-md transition-colors">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>

                    <!-- Add Service Form (Hidden by default) -->
                    <div id="add-service-form-container" class="hidden">
                        <div class="mb-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-md border border-neutral-200 dark:border-neutral-700 transform transition-all duration-300 ease-in-out opacity-0 scale-95" id="add-service-form-content">
                            <form id="add-service-form" class="p-4">
                                <div class="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Service Name</label>
                                        <input type="text" name="service_name" required
                                            class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Display Name</label>
                                        <input type="text" name="display_name" required
                                            class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Binary Path</label>
                                        <input type="text" name="binary_path" required
                                            class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Service Type</label>
                                        <select name="service_type"
                                            class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
                                            <option value="1">Kernel Driver</option>
                                            <option value="2">File System Driver</option>
                                            <option value="4">Adapter</option>
                                            <option value="8">Recognizer Driver</option>
                                            <option value="16" selected>Win32 Own Process</option>
                                            <option value="32">Win32 Share Process</option>
                                            <option value="256">Interactive Process</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Start Type</label>
                                        <select name="start_type"
                                            class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
                                            <option value="0">Boot Start</option>
                                            <option value="1">System Start</option>
                                            <option value="2" selected>Automatic</option>
                                            <option value="3">Manual</option>
                                            <option value="4">Disabled</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Service Start Name</label>
                                        <input type="text" name="service_start_name" placeholder="LocalSystem"
                                            class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
                                    </div>
                                </div>
                                <div class="flex justify-end mt-4">
                                    <button type="submit" 
                                        class="px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-black rounded-md">
                                        Add Service
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Rest of the services tab content -->
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="h-8 text-left text-neutral-600 dark:text-neutral-400">
                                <th class="px-3 py-2">Name</th>
                                <th class="px-3 py-2">Display Name</th>
                                <th class="px-3 py-2">Status</th>
                                <th class="px-3 py-2 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="services-rows" class="divide-y divide-neutral-200 dark:divide-neutral-700">
                            <!-- Services will be dynamically populated -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Object ACL Modal -->
<div id="add-object-acl-modal" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-50 flex justify-center items-center w-full h-full">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative flex max-w-lg flex-col overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
            <!-- Modal header -->
            <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
                <h3 class="font-semibold tracking-wide text-neutral-900 dark:text-white">
                    Add Object ACL
                </h3>
                <button type="button" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="add-object-acl-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <form id="add-object-acl-form">
                <div class="p-4 space-y-4">
                    <div>
                        <label for="target-identity" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Target Identity</label>
                        <input type="text" name="target-identity" id="target-identity" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Enter target identity" required />
                    </div>
                    <div>
                        <label for="principal-identity" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Principal Identity</label>
                        <input type="text" name="principal-identity" id="principal-identity" placeholder="Enter principal identity" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
                    </div>
                    <div>
                        <label for="acl-rights" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Rights</label>
                        <select id="acl-rights" name="acl-rights" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required>
                            <option value="fullcontrol">Full Control</option>
                            <option value="resetpassword">Reset Password</option>
                            <option value="writemembers">Write Members</option>
                            <option value="dcsync">DCSync</option>
                        </select>
                    </div>
                    <div>
                        <label for="ace-type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">ACE Type</label>
                        <select id="ace-type" name="ace-type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required>
                            <option value="allowed" selected>Allow</option>
                            <option value="denied">Deny</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <label for="inheritance" class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="inheritance" name="inheritance" class="sr-only peer" value="true">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                            <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Inheritance</span>
                        </label>
                    </div>
                </div>
                <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
                    <button type="submit" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-yellow-500 dark:text-black dark:focus-visible:outline-yellow-500">Add ACL</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Group Modal -->
<div id="add-group-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl max-w-md w-full">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-4 border-b border-neutral-200 dark:border-neutral-700">
            <h3 class="text-lg font-semibold text-neutral-900 dark:text-white">
                Add Group
            </h3>
            <button data-modal-hide="add-group-modal" class="text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="add-group-form" class="p-4 space-y-4">
            <div>
                <label for="group-base-dn" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    Base DN
                </label>
                <input type="text" id="group-base-dn" name="group-base-dn"
                    class="w-full px-3 py-2 bg-neutral-100 dark:bg-neutral-700 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
            </div>
            <div>
                <label for="new-groupname" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    Group Name
                </label>
                <input type="text" id="new-groupname" name="new-groupname" required
                    class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white placeholder-neutral-400"
                    placeholder="Enter group name">
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end gap-2 pt-4 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" data-modal-hide="add-group-modal"
                    class="px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-md">
                    Cancel
                </button>
                <button type="submit"
                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-black rounded-md">
                    Add Group
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Add Group Member Modal -->
<div id="add-group-member-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl max-w-md w-full">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-4 border-b border-neutral-200 dark:border-neutral-700">
            <h3 class="text-lg font-semibold text-neutral-900 dark:text-white">
                Add Group Member
            </h3>
            <button data-modal-hide="add-group-member-modal" class="text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="add-group-member-form" class="p-4 space-y-4">
            <div>
                <label for="group-name" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    Group Name
                </label>
                <input type="text" id="group-name" name="group-name"
                    class="w-full px-3 py-2 bg-neutral-100 dark:bg-neutral-700 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
            </div>
            <div>
                <label for="new-member" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    Member Name
                </label>
                <input type="text" id="new-member" name="new-member" required
                    class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white placeholder-neutral-400">
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end gap-2 pt-4 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" data-modal-hide="add-group-member-modal"
                    class="px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-md">
                    Cancel
                </button>
                <button type="submit"
                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-black rounded-md">
                    Add Member
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Remove Group Member Modal -->
<div id="remove-group-member-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl max-w-md w-full">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-4 border-b border-neutral-200 dark:border-neutral-700">
            <h3 class="text-lg font-semibold text-neutral-900 dark:text-white">
                Remove Group Member
            </h3>
            <button data-modal-hide="remove-group-member-modal" class="text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="remove-group-member-form" class="p-4 space-y-4">
            <div>
                <label for="remove-group-name" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    Group Name
                </label>
                <input type="text" id="remove-group-name" name="remove-group-name"
                    class="w-full px-3 py-2 bg-neutral-100 dark:bg-neutral-700 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
            </div>
            <div>
                <label for="remove-member" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    Member Name
                </label>
                <select id="remove-member" name="remove-member" required
                    class="w-full px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
                </select>
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end gap-2 pt-4 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" data-modal-hide="remove-group-member-modal"
                    class="px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-md">
                    Cancel
                </button>
                <button type="submit"
                    class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 dark:text-white rounded-md">
                    Remove Member
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Change Password Modal -->
<div id="change-password-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl max-w-md w-full">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-4 border-b border-neutral-200 dark:border-neutral-700">
            <h3 class="text-lg font-semibold text-neutral-900 dark:text-white">
                Change Password
            </h3>
            <button data-modal-hide="change-password-modal" class="text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="change-password-form" class="p-4 space-y-4">
            <div>
                <label for="identity-input" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    Identity
                </label>
                <input type="text" id="identity-input" name="identity-input" readonly
                    class="w-full px-3 py-2 bg-neutral-100 dark:bg-neutral-700 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
            </div>
            <div>
                <label for="new-password-input" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    New Password
                </label>
                <input type="password" id="new-password-input" name="new-password-input" required
                    class="w-full px-3 py-2 bg-neutral-100 dark:bg-neutral-700 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end gap-2 pt-4 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" data-modal-hide="change-password-modal"
                    class="px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-md">
                    Cancel
                </button>
                <button type="submit"
                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-black rounded-md">
                    Change Password
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Change Owner Modal -->
<div id="change-owner-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl max-w-md w-full">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-4 border-b border-neutral-200 dark:border-neutral-700">
            <h3 class="text-lg font-semibold text-neutral-900 dark:text-white">
                Change Owner
            </h3>
            <button data-modal-hide="change-owner-modal" class="text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="change-owner-form" class="p-4 space-y-4">
            <div>
                <label for="owner-identity-input" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    Identity
                </label>
                <input type="text" id="owner-identity-input" name="owner-identity-input" readonly
                    class="w-full px-3 py-2 bg-neutral-100 dark:bg-neutral-700 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
            </div>
            <div>
                <label for="new-owner-input" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    New Owner
                </label>
                <input type="text" id="new-owner-input" name="new-owner-input" required
                    class="w-full px-3 py-2 bg-neutral-100 dark:bg-neutral-700 border border-neutral-300 dark:border-neutral-600 rounded-md text-sm text-neutral-900 dark:text-white">
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end gap-2 pt-4 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" data-modal-hide="change-owner-modal"
                    class="px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-md">
                    Cancel
                </button>
                <button type="submit"
                    class="px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-black rounded-md">
                    Change Owner
                </button>
            </div>
        </form>
    </div>
</div>