extends ../layout
block scripts
	script(type='text/javascript').
		window.recomendedCurrency = '#{currency}'
		window.plan_code = '#{plan_code}'


block content
	- locals.supressDefaultJs = true
	script(data-main=jsPath+'main.js', src=jsPath+'libs/require.js', baseurl=jsPath)
	script(src=jsPath+'libs/recurly.min.js')

	.content.content-alt
		.container(ng-controller="NewSubscriptionController" ng-cloak)
			.row.card-group
				.col-md-6.col-md-push-3
					.card.card-highlighted
						.page-header
							span.dropdown.changePlanButton.pull-right(ng-cloak)
								a.btn.btn-default.dropdown-toggle(
									href="#",
									data-toggle="dropdown"
								)
									| {{currencyCode}} ({{plans[currencyCode]['symbol']}}) 
									span.caret
								ul.dropdown-menu(role="menu")
									li(ng-repeat="(currency, value) in plans", dropdown-toggle)
										a(
											ng-click="changeCurrency(currency)",
										) {{currency}} ({{value['symbol']}})
							h1 #{translate("new_subscription")}
						
						#subscribeForm(style="min-height: 700px;") #{translate("loading_billing_form")}...
						
				
				.col-md-3.col-md-pull-6
					if showStudentPlan == 'true'
						a.btn-primary.btn.plansPageStudentLink(
							href,
							ng-click="switchToStudent()"
						) #{translate("half_price_student")} 

					.card.card-first
						.paymentPageFeatures
							.page-header
								h3 #{translate("features")}
							h3 #{translate("unlimited_projects")}
							p #{translate("create_unlimited_projects")}
						
							h3
								if plan.features.collaborators == -1
									- var collaboratorCount = 'Unlimited'
								else
									- var collaboratorCount = plan.features.collaborators
								| #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
							p #{translate("work_on_single_version")}. #{translate("view_collab_edits")} in real time.
							
							h3 #{translate("full_doc_history")}
							p #{translate("see_what_has_been")} 
								span.added #{translate("added")} 
								| #{translate("and")} 
								span.removed #{translate("removed")}. 
								| #{translate("restore_to_any_older_version")}.
							
							h3 #{translate("sync_to_dropbox")}
							p
								| #{translate("acces_work_from_anywhere")}. 
								| #{translate("work_offline_and_sync_with_dropbox")}.
								
							hr
							
							p.small.text-center We're confident that you'll love ShareLaTeX, but if not you can cancel anytime. We'll give you your money back, no questions asked, if you let us know within 30 days.


	script(type="text/javascript").
		ga('send', 'event', 'pageview', 'payment_form', "#{plan_code}")


	script(type="text/javascript").
		Recurly.config(!{recurlyConfig})
		var recurlySubscriptionFormConfig = !{subscriptionFormOptions}
		recurlySubscriptionFormConfig.successHandler = function(){
			ga('send', 'event', 'subscription-funnel', 'subscribed')
		}

		Recurly.buildSubscriptionForm(recurlySubscriptionFormConfig);

		window.ab = [
			{step:1, bucket:"red", testName:"button_color"},
			{step:1, bucket:"blue", testName:"button_color"}
		]