window.addEventListener('load', (event) => {
    
    const tabs = document.querySelectorAll('[data-tabs-container]')

    function toggleTab(container, button){
        [...container.querySelectorAll('[data-tab-target]')].forEach((b)=>{b.classList.remove('is-selected')});
        [...container.querySelectorAll('[data-tab-index]')].forEach((t)=>{t.style.display = 'none'; t.classList.remove('is-active')});
        button.classList.add('is-selected')
        const target = button.getAttribute('data-tab-target')
        container.querySelector(`[data-tab-index="${target}"]`).style.display = 'block';
        container.querySelector(`[data-tab-index="${target}"]`).classList.add('is-active')
        
    }
    
    tabs.forEach(tabContainer => {
        const tabsButtons = tabContainer.querySelectorAll('[data-tab-target]')
        tabsButtons.forEach(button => {
            button.addEventListener('click', function(){
                toggleTab(tabContainer, this)
            })
        })
    })
})