overleaf/services/web/app/views/subscriptions/interstitial-payment.pug

extends ../layout

include ./plans/_mixins

block vars
	- entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main'
	- var suppressFooter = true
	- var suppressNavbarRight = true
	- var suppressCookieBanner = true

block append meta
	meta(name="ol-recommendedCurrency" content=recommendedCurrency)
	meta(name="ol-itm_content" content=itm_content)

block content
	main.content.content-alt#main-content
		.container
			.user-notifications
				ul.list-unstyled(ng-cloak)
					li.notification-entry
						div.alert.alert-back-to-school(
							event-tracking-mb="true"
							event-tracking="promo-prompt"
							event-tracking-trigger="load"
							event-segmentation='{"location": "interstitial-page-banner", "name": "bts2023", "content": "banner"}'
						)
							.notification-body
								| 🎉  
								p
									strong #{translate("back_to_school_banner_bargain_with_x_percent_off_in_school_or_not", {x: '15'})}
									br
									| #{translate("back_to_school_banner_extended_offer_oct_15")}
							.notification-action
								a.btn.btn-sm.btn-default-outline(
									href="/about/back-to-school-promo-2023"
									event-tracking-mb="true"
									event-tracking="promo-click"
									event-tracking-trigger="click"
									event-segmentation='{"location": "interstitial-page-banner", "name": "bts2023", "content": "banner", "type": "click"}'
								) #{translate('claim_discounts')}

		.content-page
			.plans
				.container
					if showInrGeoBanner
						div.alert.alert-success.text-centered !{translate("inr_discount_offer_plans_page_banner", {flag: '🇮🇳'})}

					.row
						.col-md-12
							.page-header.centered.plans-header.text-centered.top-page-header
								h1.text-capitalize #{translate('choose_your_plan')}

					+monthly_annual_switch("monthly", "paywall-plans-page-toggle", '{}')

					+plans_v2_table_sticky_header(true, interstitialPaymentConfig)

					.row.plans-v2-table-container(data-ol-plans-v2-period='monthly')
						.col-sm-12
							.row
								table.card.plans-v2-table.plans-v2-table-individual
									+plans_v2_table('monthly', interstitialPaymentConfig)

					.row.plans-v2-table-container(hidden data-ol-plans-v2-period='annual')
						.col-sm-12
							.row
								table.card.plans-v2-table.plans-v2-table-individual
									+plans_v2_table('annual', interstitialPaymentConfig)

					//- sticky header on mobile will be "hidden" (by removing its sticky position) if it reaches this div
					.invisible(aria-hidden="true" data-ol-plans-v2-table-sticky-header-stop)

					.row.row-spaced-large.text-centered
						.col-xs-12
							p.text-centered
								strong *
								|  
								| !{translate("the_free_compile_timeout_will_be_changing_soon_with_faster_servers", {}, [{name: 'a', attrs: {href: '/blog/changes-to-free-compile-timeouts-and-servers', rel: 'noopener noreferrer', target: '_blank'}}])}

		if (showSkipLink)
			.row.row-spaced-small.text-center
				a(href='/project'
					event-tracking="skip-button-click"
					event-tracking-mb="true"
					event-tracking-trigger="click"
					event-segmentation='{"location": "interstitial-page"}'
				)
					| #{translate("continue_with_free_plan")}			

	!= moduleIncludes("contactModalGeneral-marketing", locals)