const make_role_chips = (elem) => {
    const arr_items = elem.value == '' ? [] : elem.value.split(',');
    const roles_chips = document.getElementById('roles-chips');
    if (roles_chips) {
        roles_chips.innerHTML='';
        if (arr_items.length == 0) { return; }
        arr_items.forEach(name => {
            if (name.replaceAll(' ','') !== '') { 
                const chip = document.createElement("span");
                chip.id = `badge-${name}`;
                const arr_classes = "inline-flex items-center px-2 py-1 mr-2 text-sm font-medium text-blue-800 bg-blue-100 rounded dark:bg-blue-900 dark:text-blue-300".split(" ");
                chip.classList.add(...arr_classes);
                chip.innerHTML = `${name}`;
                roles_chips.append(chip);
            }
        });
    }
};
window.addEventListener('load', () => {
    const user_roles = document.getElementById('user-roles-inpt');
    if (user_roles) {
        make_role_chips(user_roles);
    }
});