function showSubscriptionTab(planCanceled) {
  document.getElementById('subscriptions-content').classList.remove('hidden');
  document.getElementById('subscriptions-tab').classList.add('custom-tab-active');
  document.getElementById('subscriptions-tab').classList.remove('custom-tab-inactive');

  loadComponent('buttons-container', 'components/Button.html', () => {
    const buttonText = planCanceled ? 'RE-SUBSCRIBE' : 'UPDATE PLAN';
    document.getElementById('button-text').innerText = buttonText;
    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>
    `;
    if (!planCanceled) {
      const buttonsContainer = document.getElementById('buttons-container');
      buttonsContainer.innerHTML += '<a href="#" class="block text-center text-red-600">Cancel subscription</a>';
    }
  });

  // Plan details
  const planDetails = [
    { label: 'Description', value: 'Plan description from stripe lorem ipsum', className: 'text-gray-800', labelClassName: 'text-gray-500' },
    { label: 'Price per month', value: 'XX.XX € / month', className: 'text-gray-800', labelClassName: 'text-gray-500' },
    { label: 'Active job ads', value: 'X / Total N', className: planCanceled ? 'text-red-500' : 'text-gray-800', labelClassName: planCanceled ? 'text-red-500' : 'text-gray-500' },
    { label: planCanceled ? 'Expiry date' : 'Renewal date', value: 'DD month YYYY', additionalText: planCanceled ? '(X days remaining)' : '', className: planCanceled ? 'text-red-500' : 'text-gray-800', labelClassName: planCanceled ? 'text-red-500' : 'text-gray-500' },
  ];

  const planDetailItemsContainer = document.getElementById('plan-detail-items');
  planDetailItemsContainer.innerHTML = ''; 

  planDetails.forEach(detail => {
    loadComponent(null, 'components/PlanDetailItem.html', () => {
      const item = document.createElement('div');
      item.className = 'plan-detail-item';
      item.innerHTML = `
        <p class="${detail.labelClassName}">${detail.label}</p>
        <p class="${detail.className}">${detail.value} ${detail.additionalText || ''}</p>
      `;
      planDetailItemsContainer.appendChild(item);
    });
  });

  if (planCanceled) {
    const attentionMessageContainer = document.createElement('div');
    attentionMessageContainer.id = 'attention-message-container';
    document.getElementById('subscriptions-content').appendChild(attentionMessageContainer);
    loadComponent('attention-message-container', 'components/AttentionMessage.html');
  } else {
    const attentionMessageContainer = document.getElementById('attention-message-container');
    if (attentionMessageContainer) {
      attentionMessageContainer.innerHTML = ''; 
    }
  }
}
