extends ../layout

block content

	.content.content-alt
		.container(ng-controller="AnnualUpgradeController")
			.row(ng-cloak)
				.col-md-6.col-md-offset-3
					.card(ng-init="planName = "+JSON.stringify(planName))
						.page-header
							h1.text-centered #{translate("move_to_annual_billing")}
						div(ng-hide="upgradeComplete")
							.row
								div.col-md-12 !{translate("change_to_annual_billing_and_save", {percentage:'<strong>20%</strong>', yearlySaving:"<strong>${{yearlySaving}}</strong>"})}
							.row &nbsp;
							.row
								div.col-md-12
									center
										button.btn.btn-success(ng-click="completeAnnualUpgrade()", ng-disabled="inflight")
											span(ng-show="inflight") #{translate("processing")}
											span(ng-hide="inflight") #{translate("move_to_annual_billing")} now

						div(ng-show="upgradeComplete")
							h3  #{translate("annual_billing_enabled")}, #{translate("thank_you")}.