function generateJobAds(activeCount, inactiveCount) {
  const container = document.getElementById('extra-job-ads-content');
  container.innerHTML = ''; // Clear existing content

  // Update the tab text with the total number of job ads
  const totalJobAds = activeCount + inactiveCount;
  const extraJobAdsTab = document.getElementById('extra-job-ads-tab');
  extraJobAdsTab.textContent = `Extra job ads (${totalJobAds})`;

  // Generate active job ads
  for (let i = 1; i <= activeCount; i++) {
    const activeAdContainer = document.createElement('div');
    activeAdContainer.className = 'job-ad-container mb-4';

    const activeAdTitle = document.createElement('p');
    activeAdTitle.className = 'job-ad-title text-gray-800';
    activeAdTitle.textContent = `Extra job ad #${i} (currently in use)`;

    const activeAd = document.createElement('div');
    activeAd.className = 'job-ad-detail active-job-ad p-4 bg-white rounded-lg shadow';
    activeAd.innerHTML = `
      <p class="text-green-500 status">Currently active</p>
      <p class="text-gray-800 job-title">&lt;Job ad title&gt;</p>
      <p class="text-gray-600 expiry-label">Expiry Date</p>
      <p class="text-gray-800 expiry-date">DD month YYYY (X days remaining)</p>
    `;

    activeAdContainer.appendChild(activeAdTitle);
    activeAdContainer.appendChild(activeAd);
    container.appendChild(activeAdContainer);
  }

  // Generate inactive job ads
  for (let i = 1; i <= inactiveCount; i++) {
    const inactiveAdContainer = document.createElement('div');
    inactiveAdContainer.className = 'job-ad-container mb-4';

    const inactiveAdTitle = document.createElement('p');
    inactiveAdTitle.className = 'job-ad-title text-gray-800';
    inactiveAdTitle.textContent = `Extra job ad #${i + activeCount}`;

    const inactiveAd = document.createElement('div');
    inactiveAd.className = 'job-ad-detail inactive-job-ad p-4 bg-white rounded-lg shadow';
    inactiveAd.innerHTML = `
      <p class="text-gray-500 status">Ready to be used / Not active</p>
    `;

    inactiveAdContainer.appendChild(inactiveAdTitle);
    inactiveAdContainer.appendChild(inactiveAd);
    container.appendChild(inactiveAdContainer);
  }
}

function showExtraJobAdsTab() {
  document.getElementById('extra-job-ads-content').classList.remove('hidden');
  document.getElementById('extra-job-ads-tab').classList.add('custom-tab-active');
  document.getElementById('extra-job-ads-tab').classList.remove('custom-tab-inactive');

  loadComponent('buttons-container', 'components/Button.html', () => {
    document.getElementById('button-text').innerText = 'GET EXTRA JOB ADS';
    const buttonElement = document.getElementById('button-element');
    buttonElement.classList.add('bg-black', 'text-white');
    buttonElement.innerHTML += `
      <svg class="h-6 w-6 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
      </svg>
    `;
  });

  // Generate job ads dynamically
  generateJobAds(2, 1);
}