const make_chips = (elem,keys) => {
    const arr_items = elem.value == '' ? [] : elem.value.split(',');
    const elem_chips = document.getElementById(`${keys}-chips`);
    if (elem_chips) {
        elem_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}`;
                elem_chips.append(chip);
            }
        });
    }
};
window.addEventListener('load', () => {
    const user_roles = document.getElementById('user-roles-inpt');
    if (user_roles) {
        make_chips(user_roles, 'roles');
    }
    const user_openids = document.getElementById('user-openids-inpt');
    if (user_openids) {
        make_chips(user_openids, 'openids');
    }
});