overleaf/services/web/app/views/subscriptions/plans/_mixins.pug

mixin features_premium
	li  
	li
		strong #{translate('all_premium_features')}
	li #{translate('sync_dropbox_github')}
	li #{translate('full_doc_history')}
	li #{translate('track_changes')}
	li + #{translate('more').toLowerCase()}

mixin gen_localized_price_for_plan_view(plan, view)
	span #{settings.localizedPlanPricing[recommendedCurrency][plan][view]}

mixin plans_v2_table(period, config)
	- var baseColspan = config.baseColspan || 1
	- var maxColumn = config.maxColumn || 4
	- var discountedColumn = config.discountedColumn || {}
	tr(class=`cols-${maxColumn}`)
		th(colspan=baseColspan)
		- for (var i = 0; i < maxColumn; i++)
			- var tableHeadKey = Object.keys(config.tableHead)[i]
			- var tableHeadOptions = Object.values(config.tableHead)[i] || {}
			- var colspan = tableHeadOptions.colspan || baseColspan
			- var highlighted = i === config.highlightedColumn.index
			- var discountHighlighted = i === discountedColumn.index
			- var eventTrackingKey = config.eventTrackingKey
			- var additionalEventSegmentation = config.additionalEventSegmentation || {}
			-
				if (discountHighlighted) {
					var thClass = 'plans-v2-table-discount-highlighted'
				} else if (highlighted) {
					var thClass = 'plans-v2-table-green-highlighted'
				} else if (i === config.highlightedColumn.index - 1) {
					var thClass = 'plans-v2-table-cell-before-green-highlighted-column'
				} else {
					var thClass = ''
				}
			th(
				class=thClass
				colspan=colspan
			)
				.plans-v2-table-th
					if (discountHighlighted)
						p.plans-v2-table-discount-highlighted-text #{translate(config.discountedColumn.text[period]).toUpperCase()}
					if (highlighted)
						p.plans-v2-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
					case tableHeadKey
						when 'individual_free'
							+table_head_individual_free(highlighted, period)
						when 'individual_collaborator'
							+table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
						when 'individual_professional'
							+table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
						when 'group_collaborator'
							+table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
						when 'group_professional'
							+table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
						when 'group_organization'
							+table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
						when 'student_free'
							+table_head_student_free(highlighted, period)
						when 'student_student'
							+table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, tableHeadOptions.showExtraContent)
						when 'student_university'
							+table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)

	for featuresPerSection in config.features
		- var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan)
		if featuresPerSection.divider
			tr.plans-v2-table-divider
				td(
					colspan=dividerColspan
					class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-v2-table-divider-highlighted' : '')
				)
					div
						b.plans-v2-table-divider-label #{translate(featuresPerSection.dividerLabel)}
						//- will only appear on screen width >= 768px (using CSS)
						i.fa.fa-question-circle.plans-v2-table-divider-question-icon(
							data-toggle="tooltip"
							title=translate(featuresPerSection.dividerInfo),
							data-placement="top"
						)
						//- will only appear on screen width < 768px (using CSS)
						span.plans-v2-table-divider-learn-more-container
							span (
							span.plans-v2-table-divider-learn-more-text(
								data-toggle="tooltip"
								title=translate(featuresPerSection.dividerInfo),
								data-placement="top"
							) #{translate("learn_more_lowercase")}
							span )
						span.sr-only #{translate(featuresPerSection.dividerInfo)}
		for feature, featureIndex in featuresPerSection.items
			tr(
				class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`)
			)
				td(
					event-tracking="plans-page-table"
					event-tracking-trigger="hover"
					event-tracking-ga="subscription-funnel"
					event-tracking-label=`${feature.feature}`
					colspan=baseColspan
				)
					.plans-v2-table-feature-name
						if feature.info
							span #{translate(feature.feature)}
							//- will only appear on screen width >= 768px (using CSS)
							i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon(
								data-toggle="tooltip"
								title=translate(feature.info),
								data-placement="right"
							)
							//- will only appear on screen width < 768px (using CSS)
							span.plans-v2-table-feature-name-learn-more-container
								span (
								span.plans-v2-table-feature-name-learn-more-text(
									data-toggle="tooltip"
									title=translate(feature.info),
									data-placement="top"
								) #{translate("learn_more_lowercase")}
								span )
						else
							| #{translate(feature.feature)}
				for plan, planIndex in Object.keys(feature.plans)
					- var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {}
					- var colspan = tableHeadOptions.colspan || baseColspan
					-
						if (planIndex === discountedColumn.index) {
							var tdClass = 'plans-v2-table-discount-highlighted'
						} else if (planIndex === config.highlightedColumn.index) {
							var tdClass = 'plans-v2-table-green-highlighted'
						} else if (planIndex === config.highlightedColumn.index - 1) {
							var tdClass = 'plans-v2-table-cell-before-green-highlighted-column'
						} else {
							var tdClass = ''
						}
					td(
						class=tdClass
						colspan=colspan
					)
						+table_cell(feature, plan)

mixin table_individual(period)
	table.card.plans-v2-table.plans-v2-table-individual
		+plans_v2_table(period, plansConfig.individual)

mixin table_group
	table.card.plans-v2-table.plans-v2-table-group
		+plans_v2_table('annual', plansConfig.group)

mixin table_student(period)
	table.card.plans-v2-table.plans-v2-table-student
		+plans_v2_table(period, plansConfig.student)

mixin table_head_individual_free(highlighted, period)
	.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("free")}
		+table_head_price('free', period)
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_individual_free(highlighted)
		ul.plans-v2-table-th-content-benefit
			li #{translate("one_collaborator")}
		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_individual_free(highlighted)

mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("standard")}
		+table_head_price('collaborator', period)
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
		ul.plans-v2-table-th-content-benefit
			li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
			li #{translate("all_premium_features")}
		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)

mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("professional")}
		+table_head_price('professional', period)
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
		ul.plans-v2-table-th-content-benefit
			li !{translate("unlimited_collabs_rt",{},["b"])}
			li #{translate("all_premium_features")}
		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)

mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
	.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("group_standard")}
		.plans-v2-table-price-container
			strike.plans-v2-table-price-before-discount
				+gen_localized_price_for_plan_view('collaborator', 'annual')
			p.plans-v2-table-price
				span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
			p.plans-v2-table-price-period-label
				| #{translate('per_user_year')}
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_group_collaborator(highlighted, eventTrackingKey)
			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
		ul.plans-v2-table-th-content-benefit
			li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
			li
				+table_head_group_total_per_year('collaborator')
		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_group_collaborator(highlighted, eventTrackingKey)
			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')

mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
	.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("group_professional")}
		.plans-v2-table-price-container
			strike.plans-v2-table-price-before-discount
				+gen_localized_price_for_plan_view('professional', 'annual')
			p.plans-v2-table-price
				span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
			p.plans-v2-table-price-period-label
				| #{translate('per_user_year')}
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_group_professional(highlighted, eventTrackingKey)
			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
		ul.plans-v2-table-th-content-benefit
			li #{translate("unlimited_collaborators_in_each_project")}
			li
				+table_head_group_total_per_year('professional')
		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_group_professional(highlighted, eventTrackingKey)
			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')

mixin table_head_group_total_per_year(groupPlan)
	- var initialLicenseSize = '2'
	span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]}
	| &nbsp;
	for licenseSize in groupPlanModalOptions.sizes
		span(
			hidden=(licenseSize !== initialLicenseSize)
			data-ol-plans-v2-table-th-group-license-size=licenseSize
		) !{translate("total_per_year_for_x_users", {licenseSize})}

mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
	- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
	.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("organization")}
		.plans-v2-table-comments-icon
			i.fa.fa-comments-o
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_group_organization(highlighted, eventTrackingKey)
			small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
		ul.plans-v2-table-th-content-benefit
			li #{translate("best_choices_companies_universities_non_profits")}
			li #{translate("for_groups_or_site_wide")}
			li
				a(
					target="_blank"
					href="/for/contact-sales"
					event-tracking="plans-page-click"
					event-tracking-mb="true"
					event-tracking-trigger="click"
					event-segmentation=segmentation
				) #{translate("also_available_as_on_premises")}
		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_group_organization(highlighted, eventTrackingKey)
			small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")

mixin table_head_student_free(highlighted, period)
	div.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("free")}
		+table_head_price('free', period)
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_student_free(highlighted)
		ul.plans-v2-table-th-content-benefit
			li #{translate("one_collaborator")}
		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_student_free(highlighted)

mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent)
	div.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("student")}
		+table_head_price('student', period)
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
		ul.plans-v2-table-th-content-benefit
			li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
			li #{translate("all_premium_features")}
			if showExtraContent
				li 
					b !{translate("for_students_only")}

		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)

mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	div.plans-v2-table-th-content
		p.plans-v2-table-th-content-title #{translate("university")}
		div.plans-v2-table-comments-icon
			i.fa.fa-comments-o
		.plans-v2-table-btn-buy-container-mobile
			+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
		p.plans-v2-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
		.plans-v2-table-btn-buy-container-desktop
			+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)

mixin table_head_price(plan, period)
	div.plans-v2-table-price-container
		if plan !== 'free' && period === 'annual'
			strike.plans-v2-table-price-before-discount
				+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
		p.plans-v2-table-price
			+gen_localized_price_for_plan_view(plan, period)
		p.plans-v2-table-price-period-label
			if period == 'annual'
				| #{translate("per_year")}
			else
				| #{translate("per_month")}

mixin table_cell(feature, plan)
	- var planValue = feature.plans[plan]
	- var featureName = feature.feature

	.plans-v2-table-cell
		.plans-v2-table-cell-content(
			data-ol-plans-v2-table-cell-plan=plan
			data-ol-plans-v2-table-cell-feature=featureName
		)
			if (feature.value === 'str')
				| !{translate(planValue, {}, ['strong'])}
			else if (feature.value === 'bool')
				if (planValue)
					i.fa.fa-check(aria-hidden="true")
					span.sr-only #{translate("feature_included")}
				else
					span(aria-hidden="true") -
					span.sr-only #{translate("feature_not_included")}

mixin group_plans_license_picker()
	form.plans-v2-license-picker-form(data-ol-plans-v2-license-picker-form)
		.plans-v2-license-picker-select-container
			span #{translate("number_of_users_with_colon")}
			select.plans-v2-license-picker-select(
				name="plans-v2-license-picker-select"
				id="plans-v2-license-picker-select"
				autocomplete="off"
				data-ol-plans-v2-license-picker-select
				event-tracking="plans-page-group-size"
				event-tracking-mb="true"
				event-tracking-trigger="click"
				event-tracking-element="select"
			)
				option(value="2") 2
				option(value="3") 3
				option(value="4") 4
				option(value="5") 5
				option(value="10") 10
				option(value="20") 20
				option(value="50") 50
		.plans-v2-license-picker-educational-discount
			label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label)
				input.plans-v2-license-picker-educational-discount-checkbox(
					type="checkbox"
					id="license-picker-educational-discount"
					autocomplete="off"
					data-ol-plans-v2-license-picker-educational-discount-input
					event-tracking="plans-page-edu-discount"
					event-tracking-mb="true"
					event-tracking-trigger="click"
					event-tracking-element="checkbox"
				)
				span #{translate("apply_educational_discount")}
			//- will only appear on screen width >= 768px (using CSS)
			i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon(
				data-toggle="tooltip"
				title=translate("apply_educational_discount_info"),
				data-placement="bottom"
			)
			//- will only appear on screen width < 768px (using CSS)
			span.plans-v2-license-picker-educational-discount-learn-more-container
				span (
				span.plans-v2-license-picker-educational-discount-learn-more-text(
					data-toggle="tooltip"
					title=translate("apply_educational_discount_info"),
					data-placement="bottom"
				) #{translate("learn_more_lowercase")}
				span )
			span.sr-only #{translate("apply_educational_discount_info")}

mixin btn_buy_individual(highlighted, discountHighlighted, eventTrackingKey, subscriptionPlan, period) 
	a.btn.plans-v2-table-btn-buy(
		data-ol-start-new-subscription=subscriptionPlan
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view=period
		class=(discountHighlighted ? 'btn-dark-blue' : (highlighted ? 'btn-primary' : 'btn-default'))
	)
		if (period === 'monthly')
			span #{translate("try_for_free")}
		else 
			span #{translate("buy_now_no_exclamation_mark")}

mixin btn_buy_individual_free()
	if (!getSessionUser())
		a.btn.plans-v2-table-btn-buy(
			href="/register"
			class=(highlighted ? 'btn-primary' : 'btn-default')
		)
			span #{translate("try_for_free")}
	else
		a.btn.plans-v2-table-btn-buy.invisible(
			aria-hidden="true"
			class=(highlighted ? 'btn-primary' : 'btn-default')
		)

mixin btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	+btn_buy_individual(highlighted, false, eventTrackingKey, 'collaborator', period)
	if (period === 'monthly')
		+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'collaborator', period)

mixin btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	+btn_buy_individual(highlighted, false, eventTrackingKey, 'professional', period)
	if (period === 'monthly')
		+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'professional', period)

mixin btn_buy_group_collaborator(highlighted, eventTrackingKey) 
	a.btn.plans-v2-table-btn-buy(
		data-ol-start-new-subscription='group_collaborator'
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view='annual'
		data-ol-has-custom-href
		data-ol-location='table-header'
		class=(highlighted ? 'btn-primary' : 'btn-default')
	)
		span.hidden-desktop #{translate("customize")} 
		span.hidden-mobile #{translate("customize_your_plan")}

mixin btn_buy_group_professional(highlighted, eventTrackingKey) 
	a.btn.plans-v2-table-btn-buy(
		data-ol-start-new-subscription='group_professional'
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view='annual'
		data-ol-has-custom-href
		data-ol-location='table-header'
		class=(highlighted ? 'btn-primary' : 'btn-default')
	)
		span.hidden-desktop #{translate("customize")} 
		span.hidden-mobile #{translate("customize_your_plan")}

mixin btn_buy_group_organization(highlighted, eventTrackingKey) 
	a.btn.plans-v2-table-btn-buy(
		data-ol-start-new-subscription='group_organization'
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view='annual'
		data-ol-has-custom-href
		data-ol-location='table-header'
		href='/for/contact-sales'
		target='_blank'
		class=(highlighted ? 'btn-primary' : 'btn-default')
	)
		span #{translate("contact_us_lowercase")}

mixin btn_buy_student_free(highlighted)
	if (!getSessionUser())
		a.btn.plans-v2-table-btn-buy(
			href="/register"
			class=(highlighted ? 'btn-primary' : 'btn-default')
		)
			span #{translate("try_for_free")}

mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	a.btn.plans-v2-table-btn-buy(
		data-ol-start-new-subscription='student'
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view=period
		data-ol-location='card'
		class=(highlighted ? 'btn-primary' : 'btn-default')
	)
		if (period === 'monthly')
			span #{translate("try_for_free")}
		else 
			span #{translate("buy_now_no_exclamation_mark")}
	if (period === 'monthly')
		+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'student', period)

mixin btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	- var segmentation = JSON.stringify(Object.assign({}, {button: 'student-university', location: 'table-header-list', period}, additionalEventSegmentation))
	a.btn.plans-v2-table-btn-buy(
		href="/for/contact-sales"
		target="_blank"
		event-tracking=eventTrackingKey
		event-tracking-mb="true"
		event-tracking-trigger="click"
		event-segmentation=segmentation
		class=(highlighted ? 'btn-primary' : 'btn-default')
	)
		span #{translate("contact_us_lowercase")}

mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan)
	- var buttonSegmentation = plan + '-link'
	- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation))
	small.plans-v2-table-th-content-additional-link
		| #{translate("or")} 
		a(
			href="/for/contact-sales"
			target="_blank"
			event-tracking=eventTrackingKey
			event-tracking-mb="true"
			event-tracking-trigger="click"
			event-segmentation=segmentation
		) #{translate("contact_us_lowercase")}

mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, period)
	- var buttonSegmentation = plan + '-link'
	- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header', period}, additionalEventSegmentation))
	- var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'}
	- var itmReferrer = itm_referrer ? { itm_referrer } : {}
	- var qs = new URLSearchParams({planCode: plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer})
	small.plans-v2-table-th-content-additional-link
		| #{translate("or")} 
		a(
			href=`/user/subscription/new?${qs.toString()}`
			event-tracking=eventTrackingKey
			event-tracking-mb="true"
			event-tracking-trigger="click"
			event-segmentation=segmentation
		) #{translate("buy_now_no_exclamation_mark")}

mixin plans_v2_table_sticky_header(withSwitch, config)
	- var tableHeadKeys = Object.keys(config.tableHead)
	.row.plans-v2-table-sticky-header.sticky(
		data-ol-plans-v2-table-sticky-header
		class=(withSwitch ? 'plans-v2-table-sticky-header-with-switch' : 'plans-v2-table-sticky-header-without-switch')
	)
		- for (var i = 0; i < tableHeadKeys.length; i++)
			- var tableHeadKey = tableHeadKeys[i]
			- var translateKey = tableHeadKey.split('_')[1]
			-
				if (config.discountedColumn?.index === i) {
					var elClass = 'plans-v2-table-sticky-header-item-discount-highlighted'
				} else if (config.highlightedColumn.index === i) {
					var elClass = 'plans-v2-table-sticky-header-item-green-highlighted'
				} else {
					var elClass = ''
				}
			.plans-v2-table-sticky-header-item(
				class=elClass
			)
				case tableHeadKey
					when 'individual_collaborator'
						span #{translate('standard')}
					when 'group_professional'
						span #{translate(tableHeadKey)}
					when 'group_collaborator'
						span #{translate('group_standard')}
					default
						span #{translate(translateKey)}

mixin table_sticky_header_all(plansConfig)
	.row.plans-v2-table-sticky-header-container(
		data-ol-plans-v2-view='individual'
	)
		+plans_v2_table_sticky_header(true, plansConfig.individual)
	.row.plans-v2-table-sticky-header-container(
		hidden
		data-ol-plans-v2-view='group'
	)
		+plans_v2_table_sticky_header(false, plansConfig.group)
	.row.plans-v2-table-sticky-header-container(
		hidden
		data-ol-plans-v2-view='student'
	)
		+plans_v2_table_sticky_header(true, plansConfig.student)

mixin monthly_annual_switch(initialState, eventTracking, eventSegmentation)
	- var monthlyAnnualToggleChecked = initialState === 'monthly'
	.row
		.col-md-4.col-md-offset-4.text-centered.plans-v2-m-a-switch-container(data-ol-plans-v2-m-a-switch-container)
			.plans-v2-m-a-switch-annual-text-container
				span.underline(data-ol-plans-v2-m-a-switch-text='annual') #{translate("annual")}
				.tooltip.in.left.plans-v2-m-a-tooltip(
					role="tooltip"
					data-ol-plans-v2-m-a-tooltip
					class=monthlyAnnualToggleChecked ? 'plans-v2-m-a-tooltip-monthly-selected' : ''
				)
					.tooltip-arrow
					.tooltip-inner
						span(hidden=!monthlyAnnualToggleChecked data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")}
						span(hidden=monthlyAnnualToggleChecked data-ol-tooltip-period='annual') #{translate("saving_20_percent")}

			label.plans-v2-m-a-switch(data-ol-plans-v2-m-a-switch)
				input(
					type="checkbox"
					checked=monthlyAnnualToggleChecked
					role="switch"
					aria-label=translate("select_monthly_plans")
					autocomplete="off"
					event-tracking=eventTracking
					event-tracking-mb="true"
					event-tracking-trigger="click"
					event-tracking-element="checkbox"
					event-segmentation=eventSegmentation
				)
				span
			span(data-ol-plans-v2-m-a-switch-text='monthly') #{translate("monthly")}