function initTabs(unique) {
    var tabs_selector = '#tabs-'+unique+' li';
    var TABS = [...document.querySelectorAll(tabs_selector)];
    var CONTENT = [...document.querySelectorAll('#tab-content-'+unique+' div')];
    var ACTIVE_CLASS = 'is-active';
    TABS.forEach((tab) => {
        tab.addEventListener('click', (e) => {
            let selected = tab.getAttribute('data-tab');
            updateActiveTab(TABS, ACTIVE_CLASS, tab);
            updateActiveContent(CONTENT, ACTIVE_CLASS, selected);
        })
    })
}

function updateActiveTab(TABS, ACTIVE_CLASS, selected) {
    TABS.forEach((tab) => {
        if (tab && tab.classList.contains(ACTIVE_CLASS)) {
            tab.classList.remove(ACTIVE_CLASS);
        }
    });
    selected.classList.add(ACTIVE_CLASS);
}

function updateActiveContent(CONTENT, ACTIVE_CLASS, selected) {
    CONTENT.forEach((item) => {
        if (item && item.classList.contains(ACTIVE_CLASS)) {
            item.classList.remove(ACTIVE_CLASS);
        }
        let data = item.getAttribute('data-content');
        if (data === selected) {
            item.classList.add(ACTIVE_CLASS);
        }
    });
}

// initTabs();