extends ../layout-marketing

block content
	.content.content-alt
		.container.bonus
			.row
				.col-md-8.col-md-offset-2
					.card
						.container-fluid
							.row
								.col-md-10.col-md-offset-1
									p.thanks The Overleaf Bonus Program has been discontinued.
									p.thanks Please <a href="/contact">contact us</a> if you have any questions.
									
							if (refered_user_count > 0)
								.row.ab-bonus
									.col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 30px; margin-top: 20px;")
										- for (var i = 0; i <= 10; i++) {
											if (refered_user_count == i)
												.number(style="left: "+i+"0%").active #{i}
											else
												.number(style="left: "+i+"0%") #{i}
										- }
	
								.row.ab-bonus
									.col-md-10.col-md-offset-1.bonus-banner
										.progress
											.progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%")
	
								.row.ab-bonus
									.col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 110px;")
										.perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")}
										.perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")}
										.perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")}
										.perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("unlimited_collabs")}
								.row &nbsp;
	
								.row.ab-bonus
									.col-md-10.col-md-offset-1.bonus-banner.bonus-status
										if (refered_user_count == 1)
											p.thanks You’ve introduced <strong>1</strong> person to #{settings.appName}.
										else
											p.thanks You’ve introduced <strong>#{refered_user_count}</strong> people to #{settings.appName}.