extends ../layout

block content
	.content.content-alt
		.container
			.row
				.registration_message
					if sharedProjectData.user_first_name !== undefined
						h1  #{translate("user_wants_you_to_see_project", {username:sharedProjectData.user_first_name, projectname:sharedProjectData.project_name})}
						div #{translate("join_sl_to_view_project")}.
							a(href="/login")  #{translate("login_here")}
					else if newTemplateData.templateName !== undefined
						h1 #{translate("register_to_edit_template", {templateName:newTemplateData.templateName})}

						div #{translate("already_have_sl_account")}
							a(href="/login")  #{translate("login_here")}

			.row
				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
					.card
						.page-header
							h1 #{translate("register")}
						form(async-form="register", name="registerForm", action="/register", method="POST", ng-cloak)
							input(name='_csrf', type='hidden', value=csrfToken)
							input(name='redir', type='hidden', value=redir)
							form-messages(for="registerForm")
							.form-group
								label(for='email') #{translate("email")}
								input.form-control(
									type='email',
									name='email',
									placeholder="email@example.com"
									required,
									ng-model="email",
									ng-init="email = #{JSON.stringify(new_email)}",
									ng-model-options="{ updateOn: 'blur' }",
									focus="true"
								)
								span.small.text-primary(ng-show="registerForm.email.$invalid && registerForm.email.$dirty")
									| #{translate("must_be_email_address")}
							.form-group
								label(for='password') #{translate("password")}
								input.form-control(
									type='password',
									name='password',
									placeholder="********",
									required,
									ng-model="password"
								)
								span.small.text-primary(ng-show="registerForm.password.$invalid && registerForm.password.$dirty")
									| #{translate("required")}
							.actions
								button.btn-primary.btn(
									type='submit'
									ng-disabled="registerForm.inflight"
								)
									span(ng-show="!registerForm.inflight") #{translate("register")}
									span(ng-show="registerForm.inflight") #{translate("registering")}...