document.addEventListener('DOMContentLoaded', function () {
    const tabsContainer = document.querySelector('#human-in-loop-tabs');
    if (!tabsContainer) return;

    const tabs = tabsContainer.querySelectorAll('.tab-button');
    const contents = tabsContainer.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const target = tab.getAttribute('data-tab');

            // Deactivate all tabs and hide all content
            tabs.forEach(t => {
                t.classList.remove('active-tab', 'border-black', 'text-gray-900');
                t.classList.add('text-gray-500', 'border-transparent');
            });
            contents.forEach(c => {
                c.classList.add('hidden');
            });

            // Activate the clicked tab and show its content
            tab.classList.add('active-tab', 'border-black', 'text-gray-900');
            tab.classList.remove('text-gray-500', 'border-transparent');
            
            const activeContent = tabsContainer.querySelector(`#${target}`);
            if (activeContent) {
                activeContent.classList.remove('hidden');
            }
        });
    });
});