const tabs = document.querySelectorAll('.tabs input[type="radio"]');
const tabContents = document.querySelectorAll('.tab-content');
const tabLabels = document.querySelectorAll('.tabs label'); // Assuming you have labels

function showTab(tabIndex) {
  tabContents.forEach(content => {
    content.classList.remove('active');
  });
  
  tabLabels.forEach(label => {
    label.classList.remove('active'); // Remove 'active' from all labels
  });
  
  tabs[tabIndex].checked = true;
  tabContents[tabIndex].classList.add('active');
  tabLabels[tabIndex].classList.add('active'); // Add 'active' to the clicked label
}

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    showTab(index);
  });
});

// Show initial tab
showTab(0);

//Dropdown lists
document.getElementById('dropdown-models').addEventListener('change', function() {
  var selectedOption = this.value;
  var allContents = document.querySelectorAll('.content-models');
  for (var i = 0; i < allContents.length; i++) {
    if (allContents[i].id === selectedOption) {
      allContents[i].classList.remove('hidden');
    } else {
      allContents[i].classList.add('hidden');
    }
  }
});

document.getElementById('dropdown-datasets').addEventListener('change', function() {
  var selectedOption = this.value;
  var allContents = document.querySelectorAll('.content-datasets');
  for (var i = 0; i < allContents.length; i++) {
    if (allContents[i].id === selectedOption) {
      allContents[i].classList.remove('hidden');
    } else {
      allContents[i].classList.add('hidden');
    }
  }
});

document.getElementById('dropdown-spaces').addEventListener('change', function() {
  var selectedOption = this.value;
  var allContents = document.querySelectorAll('.content-spaces');
  for (var i = 0; i < allContents.length; i++) {
    if (allContents[i].id === selectedOption) {
      allContents[i].classList.remove('hidden');
    } else {
      allContents[i].classList.add('hidden');
    }
  }
});

document.getElementById('dropdown-followers').addEventListener('change', function() {
  var selectedOption = this.value;
  var allContents = document.querySelectorAll('.content-followers');
  for (var i = 0; i < allContents.length; i++) {
    if (allContents[i].id === selectedOption) {
      allContents[i].classList.remove('hidden');
    } else {
      allContents[i].classList.add('hidden');
    }
  }
});