include ./_plans_faq_tabs_2026
include ../../_mixins/eyebrow
include ../../_mixins/material_symbol

- var managingYourSubscription = 'managingYourSubscription'
- var overleafIndividualPlans = 'overleafIndividualPlans'
- var overleafGroupPlans = 'overleafGroupPlans'
.container.plans-faq
	.row
		.col-md-12.faq-heading-container
			h2
				+eyebrow(translate('frequently_asked_questions'))
				| #{translate("lets_answer_your_questions")}

	.row
		.col-xs-12
			.ol-tabs.plans-faq-tabs
				.nav-tabs-container
					ul.nav.nav-tabs(role='tablist')
						li(role='presentation')
							a.active(
								role='tab'
								data-bs-toggle='tab'
								href='#' + managingYourSubscription
								aria-controls=managingYourSubscription
							)
								| #{translate('managing_your_subscription')}
						li(role='presentation')
							a(
								role='tab'
								data-toggle='tab'
								data-bs-toggle='tab'
								href='#' + overleafIndividualPlans
								aria-controls=overleafIndividualPlans
							)
								| #{translate('overleaf_individual_plans')}
						li(role='presentation')
							a(
								role='tab'
								data-toggle='tab'
								data-bs-toggle='tab'
								href='#' + overleafGroupPlans
								aria-controls=overleafGroupPlans
							)
								| #{translate('overleaf_multi_license_plans')}

				.tab-content
					.tab-pane.active(role='tabpanel' id=managingYourSubscription)
						+managingYourSubscription
					.tab-pane(role='tabpanel' id=overleafIndividualPlans)
						+overleafIndividualPlans
					.tab-pane(role='tabpanel' id=overleafGroupPlans)
						+overleafGroupPlans