var token    		= document.getElementById("form-token"      ).value;
const listerUser	= document.getElementById("lister-user"		);
const listerRoles	= document.getElementById("lister-roles"	);

sendHttpRequest("/api/auth/users/list", "POST", null,
    function (error, response) {
        if (error) console.error("Error:", error);
        else {
            console.log("JSON Response:", response);
            const ls = JSON.parse(response);

            ls.data.forEach(row => {
                const itemElement = document.createElement("div");
                const rolesList = row.roles.map(row2 => `<li>[${row2.id}] ${row2.name}</li>`).join("");
                const verificationList = row.verification.map(row2 => `<li>${row2.type}: ${row2.verified}</li>`).join("");
                itemElement.innerHTML = `
                    <li>
                        [${row.id}] ${row.username}<br>
                        Email: ${row.email}<br>
                        Phone: ${row.phone}<br>
                        Roles:
                        <ul>
                            ${rolesList}
                        </ul><br>
                        Verification:
                        <ul>
                            ${verificationList}
                        </ul>
                    </li>
                `;
                listerUser.appendChild(itemElement);
            });
        }
    }, "application/json", `Bearer ${token}`
);

function invite() {
    const checkedRoles = Array
          .from(document.querySelectorAll('input[name="roles"]:checked'))
          .map(cb => Number(cb.value)); // Convert into number
    const email    = document.getElementById('form-email').value;
    const username = document.getElementById('form-username').value;
    const password = document.getElementById('form-password').value;

    console.log({
        email,
        username,
        password,
        roles: checkedRoles // Example: [2, 3]
    });

    // Next command here
}