document.addEventListener('DOMContentLoaded', function() {
    const tabsContainer = document.createElement('div');
    tabsContainer.className = 'tabs';

    const tabs = [
        { id: 'tab18', text: '1.8 Clients', content: '#desktopVersion18' },
        { id: 'tabModded', text: 'Modded Clients', content: '#moddedButtons' },
        { id: 'tab152', text: '1.5.2 Clients', content: '#desktopVersion152' },
        { id: 'tabOther', text: 'Other Versions', content: '#desktopVersionOther' }
    ];

    const searchContainer = document.querySelector('.search-container');

    tabs.forEach((tab, index) => {
        const button = document.createElement('button');
        button.className = `tab ${index === 0 ? 'active' : ''}`;
        button.setAttribute('data-tab', tab.content);
        button.textContent = tab.text;
        tabsContainer.appendChild(button);
    });

    searchContainer.after(tabsContainer);

    document.querySelectorAll('.version-text').forEach(text => {
        text.style.display = 'none';
    });

    document.querySelector(tabs[0].content).classList.add('tab-content', 'active');
    tabs.slice(1).forEach(tab => {
        document.querySelector(tab.content).classList.add('tab-content');
    });

    tabsContainer.addEventListener('click', (e) => {
        if (e.target.classList.contains('tab')) {

            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });

            e.target.classList.add('active');
            const contentId = e.target.getAttribute('data-tab');
            document.querySelector(contentId).classList.add('active');
        }
    });
});