.row
	.col-md-12
		.page-header.centered.plans-header.text-centered
			h1.text-capitalize #{translate('instant_access')}
.row
	.col-md-8.col-md-offset-2
		p.text-centered #{translate("sl_benefits_plans")}

.row.top-switch
	.col-md-6.col-md-offset-3
		+plan_switch('card')
	.col-md-2.text-right
		+currency_dropdown

div(ng-show="showPlans")
	.row
		.col-md-10.col-md-offset-1
			.row
				.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
					.col-md-4
						.card.card-first
							.card-header
								h2 #{translate("personal")}
							h5.tagline #{translate("tagline_personal")}
							.circle #{translate("free")}
							+features_free
					.col-md-4
						.card.card-highlighted
							.best-value
								strong #{translate('best_value')}
							.card-header
								h2 #{translate("collaborator")}
							h5.tagline #{translate("tagline_collaborator")}
							.circle
								+price_collaborator
							+features_collaborator
					.col-md-4
						.card.card-last
							.card-header
								h2 #{translate("professional")}
							h5.tagline #{translate("tagline_professional")}
							.circle
								+price_professional
							+features_professional

				.card-group.text-centered(ng-if="ui.view == 'student'")
					.col-md-4
						.card.card-first
							.card-header
								h2 #{translate("personal")}
							h5.tagline #{translate("tagline_personal")}
							.circle #{translate("free")}
							+features_free

					.col-md-4
						.card.card-highlighted
							+card_student_annual

					.col-md-4
						.card.card-last
							+card_student_monthly

.row.row-spaced-large.text-centered
	i.fa.fa-cc-mastercard.fa-2x &nbsp;
	i.fa.fa-cc-visa.fa-2x &nbsp;
	i.fa.fa-cc-amex.fa-2x &nbsp;
	i.fa.fa-cc-paypal.fa-2x &nbsp;
	div.text-centered #{translate('change_plans_any_time')}<br/> #{translate('billed_after_x_days', {len:'{{trial_len}}'})}

.row.row-spaced-large
	.col-md-8.col-md-offset-2
		.card.text-centered
			.card-header
				h2 #{translate('looking_multiple_licenses')}
			span #{translate('reduce_costs_group_licenses')}
			br
			br
			a.btn.btn-info(href="/i/university/groups") #{translate('find_out_more')}

div
	.row.row-spaced-large
		.col-sm-12
			.page-header.plans-header.plans-subheader.text-centered
				h2 #{translate('compare_plan_features')}
	.row
		.col-md-6.col-md-offset-3
			+plan_switch('table')
		.col-md-3.text-right
			+currency_dropdown
	.row(event-tracking="features-table-viewed" event-tracking-ga="subscription-funnel" event-tracking-trigger="scroll" event-tracking-send-once="true" event-tracking-label=`exp-{{plansVariant}}`)
		.col-sm-12(ng-if="ui.view != 'student'")
			+table_premium
		.col-sm-12(ng-if="ui.view == 'student'")
			+table_student

	.row.row-spaced-large
		.col-md-12
			.page-header.plans-header.plans-subheader.text-centered
				h2 #{translate('in_good_company')}
	.row
		.col-md-6
			div
				.row
					.col-md-3
						.circle-img
							img(src=buildImgPath('advocates/erdogmus.jpg') alt="Professor Erdogmus")
					.col-md-9
						blockquote
							p The ability to track changes and the real-time collaborative nature is what sets ShareLaTeX apart.
							footer Professor Erdogmus, Northeastern University
		.col-md-6
			div
				.row
					.col-md-3
						.circle-img
							img(src=buildImgPath('advocates/henderson.jpg') alt="Rob Henderson")
					.col-md-9
						blockquote
							p ShareLaTeX has proven to be a powerful and robust collaboration tool that is widely used in our School.
							footer Rob Henderson, School Of Informatics And Computing - Indiana University

	.faq
		.row.row-spaced-large
			.col-md-12
				.page-header.plans-header.plans-subheader.text-centered
					h2 FAQ
		.row
			.col-md-6
				h3 #{translate("faq_how_free_trial_works_question")}
				p #{translate('faq_how_free_trial_works_answer', { len:'{{trial_len}}' })}
			.col-md-6
				h3 #{translate('faq_change_plans_question')}
				p #{translate('faq_change_plans_answer')}
		.row
			.col-md-6
				h3 #{translate('faq_do_collab_need_premium_question')}
				p #{translate('faq_do_collab_need_premium_answer')}
			.col-md-6
				h3 #{translate('faq_need_more_collab_question')}
				p !{translate('faq_need_more_collab_answer', { referFriendsLink: '<a href="/user/bonus">' + translate('referring_your_friends') + '</a>'})}
		.row
			.col-md-6
				h3 #{translate('faq_purchase_more_licenses_question')}
				p !{translate('faq_purchase_more_licenses_answer', { groupLink: '<a href="/i/university/groups">' + translate('discounted_group_accounts') + '</a>' })}
			.col-md-6
				h3 #{translate('faq_monthly_or_annual_question')}
				p #{translate('faq_monthly_or_annual_answer')}
		.row
			.col-md-6
				h3 #{translate('faq_how_to_pay_question')}
				p #{translate('faq_how_to_pay_answer')}
			.col-md-6
				h3 #{translate('faq_pay_by_invoice_question')}
				p !{translate('faq_pay_by_invoice_answer', { groupLink: '<a href="/i/university/groups">' + translate('discounted_group_accounts') + '</a>' })}
		.row.row-spaced-large.text-centery
			.col-md-12
				.plans-header.plans-subheader.text-centered
					h2 #{translate('still_have_questions')}
						button.btn.btn-info.btn-header.text-capitalize(ng-controller="ContactGeneralModal" ng-click="openModal()") #{translate('get_in_touch')}
						!= moduleIncludes("contactModalGeneral", locals)
