<div id="edit-user-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 items-center justify-center hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-2xl max-h-full">
        <!-- Modal content -->
        <form action="#" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Edit user
                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" ata-modal-hide="editUserModal"
                    onclick="close_usr()"
                >
                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-6 space-y-6">
                <div class="grid grid-cols-6 gap-6">
                    <div class="col-span-6 sm:col-span-3">
                        <label for="usr-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
                        <input  type="text" id="usr-name" name="usr-name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Bonnie" required="">
                    </div>
                    <div class="col-span-6 sm:col-span-3">
                        <label for="usr-fullname" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">FullName</label>
                        <input  type="text" id="usr-fullname" name="usr-fullname" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Green" required="">
                    </div>
                    <div class="col-span-6 sm:col-span-3">
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
                        <input type="email" id="usr-email" name="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="example@company.com" required="">
                    </div>
                    <div class="col-span-6 sm:col-span-3">
                        <label for="usr-description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
                        <input type="text" id="usr-description" name="usr-description"  class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. +(12)3456 789" required="">
                    </div>
                    <div class="col-span-6 sm:col-span-3">
                        <label for="usr-roles" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Roles</label>
                        <input type="text" id="usr-roles" name="usr-roles" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Development" required="">
                    </div>
                    <div class="col-span-6 sm:col-span-3">
                        <label for="usr-items" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Items</label>
                        <input type="text" id="usr-items" name="usr-items" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="123456" required="">
                    </div>
                    <div class="col-span-6 sm:col-span-3">
                        <label for="usr-openids" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            <div class="flex items-center space-x-3"">
                                <span>Open IDs </span>
                                <svg class="my-2" width="30" height="30" aria-hidden="true"><use href="#symbl-openid"/></svg>
                            </div>
                        </label>
                        <input type="text" id="usr-openids" name="usr-openids" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="OpenIDs keys" required="">
                    </div>
                    <div class="col-span-6 sm:col-span-3 mt-7">
                        {# <label for="usr-status" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label> #}
                        <div class="flex space-x-4 ml-2">
                        <div class="flex items-center">
                            <input type="checkbox" id="usr-isadmin" name="usr-isadmin"  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="usr-isadmin" class="block m-2 text-sm font-medium text-gray-900 dark:text-white">Admin </label>
                        </div>
                            <button id="states-button" data-dropdown-toggle="dropdown-status" class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">
                                Status <svg aria-hidden="true" class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                            </button>
                            <div id="dropdown-status" class="z-10 hidden divide-y divide-gray-100 border-1 border-gray-400 rounded-lg shadow w-44 bg-gray-200 dark:bg-gray-800">
                                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="status-button">
                                    <li>
                                        <button type="button" onclick="set_user_status('Active','green')" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white">
                                            <div class="inline-flex items-center">
                                                <div class="h-2.5 w-2.5 rounded-full bg-green-500 mr-2"></div>
                                                <div>Active</div>
                                            </div>
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" onclick="set_user_status('Created','blue')" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white">
                                            <div class="inline-flex items-center">
                                                <div class="h-2.5 w-2.5 rounded-full bg-blue-500 mr-2"></div>
                                                <div>Created</div>
                                            </div>
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" onclick="set_user_status('Pending','orange')" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white">
                                            <div class="inline-flex items-center">
                                                <div class="h-2.5 w-2.5 rounded-full bg-orange-500 mr-2"></div>
                                                <div>Pending</div>
                                            </div>
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" onclick="set_user_status('Lock','red')" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white">
                                            <div class="inline-flex items-center">
                                                <div class="h-2.5 w-2.5 rounded-full bg-red-500 mr-2"></div>
                                                <div>Lock</div>
                                            </div>
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" onclick="set_user_status('Unknown','yellow')" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white">
                                            <div class="inline-flex items-center">
                                                <div class="h-2.5 w-2.5 rounded-full bg-yellow-500 mr-2"></div>
                                                <div>Unknown</div>
                                            </div>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            <div id="current-usr-status" class="mt-3"></div>
                            <input type="text" id="usr-status" name="usr-status" class="hidden disabled shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required=""> 
                            {# <select show_dark=true id="usr-status" name="usr-status"
                                    class="hidden block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-400 peer"
                                >
                                    <option value="Active">Active</option>
                                    <option value="Created">Created</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Lock">Lock</option>
                                    <option value="Uunknown">Unknown</option>
                            </select> #}
                        </div>
                    </div>
                    <div class="col-span-6 sm:col-span-3">
                        <label for="usr-otp-defs" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">TOTP defs</label>
                        <input type="text" id="usr-otp-defs" name="usr-otp-defs" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required="">
                    </div>
                    <div class="col-span-6 sm:col-span-3">
                        <div class="flex items-center">
                            <input type="checkbox" id="usr-otp-enabled" name="usr-otp-enabled"  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="usr-otp-enabled" class="block m-2 text-sm font-medium text-gray-900 dark:text-white">TOTP enabled</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="usr-otp-verified" name="usr-otp-verified" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="usr-otp-verified" class="block m-2 text-sm font-medium text-gray-900 dark:text-white">TOTP verified</label>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Modal footer -->
            <div class="flex justify-between items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                    onclick="save_all_usr(event)"
                >Save all</button>
                <div id="usr-save-warning" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
                    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                        <span class="sr-only">Warning icon</span>
                    </div>
                    <div class="ml-3 text-sm font-normal">To see saved changes in row table RELOAD page is required.</div>
                </div>
                <button type="submit" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
                    onclick="close_usr(event)"
                >Cancel</button>
            </div>
        </form>
    </div>
</div>