<div
    class="offcanvas offcanvas-end"
    tabindex="-1"
    id="offcanvasAddUser"
    aria-labelledby="offcanvasAddUserLabel">
    <div class="offcanvas-header border-bottom">
        <h5 id="offcanvasAddUserLabel" class="offcanvas-title">Add User</h5>
        <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
        <form class="add-new-user pt-0" id="addNewUserForm" action="{{ route('auth.createAccount') }}" method="POST" onsubmit="return false;">
            @csrf
            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-user-fullname">User Name</label>
                <input
                    type="text"
                    class="form-control"
                    id="add-user-name"
                    placeholder="john"
                    name="name"
                    aria-label="john" />
                </div>
            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-user-email">Email</label>
                <input
                    type="text"
                    id="add-user-email"
                    class="form-control"
                    placeholder="john.doe@example.com"
                    aria-label="john.doe@example.com"
                    name="email" />
                </div>
            <div class="mb-6 form-password-toggle form-control-validation">
                <label class="form-label" for="add-user-password">Password</label>
                <div class="input-group input-group-merge">
                    <input
                    type="password"
                    id="add-user-password"
                    class="form-control"
                    name="password"
                    placeholder="Enter password" />
                    <span class="input-group-text cursor-pointer">
                        <i class="bx bx-hide"></i>
                    </span>
                </div>
            </div>
            <button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
        </form>
        </div>
    </div>
</div>