extends ../layout

block content
	.content.content-alt
		.container
			.row
				.col-md-12.col-lg-10.col-lg-offset-1
					.card
						.page-header
							h1  #{translate("account_settings")}
						.account-settings(ng-controller="AccountSettingsController", ng-cloak)
							if locals.showAffiliationsUI
								form.row(
									ng-controller="UserAffiliationsController"
									name="affiliationsForm"
								)
									.col-md-12
										h3 Emails and Affiliations
										p.small Add additional email addresses to your account to access any upgrades your university or institution has, to make it easier for collaborators to find you, and to make sure you can recover your account.
										table.table.affiliations-table
											thead
												tr
													th.affiliations-table-email Email
													th.affiliations-table-institution Institution and role
													th.affiliations-table-inline-actions
											tbody
												tr(
													ng-repeat="userEmail in userEmails"
												)
													td {{ userEmail.email + (userEmail.default ? ' (default)' : '') }}
													td 
														div(ng-if="userEmail.affiliation.institution") {{ userEmail.affiliation.institution.name }}
														div(ng-if="userEmail.affiliation.role || userEmail.affiliation.department") 
															span(ng-if="userEmail.affiliation.role") {{ userEmail.affiliation.role }}
															span(ng-if="userEmail.affiliation.role && userEmail.affiliation.department") , 
															span(ng-if="userEmail.affiliation.department") {{ userEmail.affiliation.department }}
													td 
														a(
															href
															ng-if="!userEmail.default"
															ng-click="setDefaultUserEmail(userEmail.email)"
														) Make default
														br
														a(
															href
															ng-if="!userEmail.default"
															ng-click="removeUserEmail(userEmail.email)"
														) Remove
												tr.affiliations-table-highlighted-row(
													ng-if="ui.isLoadingEmails"
												)
													td.text-center(colspan="3") 
														i.fa.fa-fw.fa-spin.fa-refresh
														|  Loading...
												
												tr.affiliations-table-highlighted-row(
													ng-if="!ui.showAddEmailUI && !ui.isLoadingEmails"
												)
													td(colspan="3")
														a(
															href
															ng-click="showAddEmailForm()"
														) Add another email

												tr.affiliations-table-highlighted-row(
													ng-if="ui.showAddEmailUI"
												)
													td
														.affiliations-form-group
															input-suggestions(
																ng-model="newAffiliation.email"
																ng-model-options="{ allowInvalid: true }"
																get-suggestion="getEmailSuggestion(userInput)"
																on-blur="handleEmailInputBlur()"
																input-id="affilitations-email"
																input-name="affilitationsEmail"
																input-placeholder="e.g. johndoe@mit.edu"
																input-type="email"
																input-required="true"
															)
													td
														.affiliations-table-label(
															ng-if="newAffiliation.university && !ui.showManualUniversitySelectionUI"
														)
															| {{ newAffiliation.university.name }} (
															a(
																href
																ng-click="selectUniversityManually();"
															) change
															| )
														.affiliations-table-label(
															ng-if="!newAffiliation.university && !ui.isValidEmail && !ui.showManualUniversitySelectionUI"
														) Start by adding your email address.
														.affiliations-table-label(
															ng-if="!newAffiliation.university && ui.isValidEmail && !ui.isBlacklistedEmail && !ui.showManualUniversitySelectionUI"
														)
															| Is your email affiliated with an institution? 
															br
															a(
																href
																ng-click="selectUniversityManually();"
															) Let us know
														.affiliations-form-group(
															ng-if="ui.showManualUniversitySelectionUI"
														)
															ui-select(
																ng-model="newAffiliation.country"
															)
																ui-select-match(
																	placeholder="Country"
																) {{ $select.selected.name }}
																ui-select-choices(
																	repeat="country in countries | filter: $select.search"
																)
																	span(
																		ng-bind="country.name"
																	s)
														.affiliations-form-group(
															ng-if="ui.showManualUniversitySelectionUI"
														)
															ui-select(
																ng-model="newAffiliation.university"
																ng-disabled="!newAffiliation.country"
																tagging="addUniversityToSelection"
																tagging-label="false"
															)
																ui-select-match(
																	placeholder="Institution"
																) {{ $select.selected.name }}
																ui-select-choices(
																	repeat="university in universities | filter: $select.search"
																)
																	span(
																		ng-bind="university.name"
																	)
														.affiliations-form-group(
															ng-if="ui.isValidEmail && newAffiliation.university"
														)
															input.form-control(
																type="text"
																id="affiliations-role"
																placeholder="Role"
																ng-model="newAffiliation.role"
															)
														.affiliations-form-group(
															ng-if="ui.isValidEmail && newAffiliation.university"
														)
															input.form-control(
																type="text"
																id="affiliations-department"
																placeholder="Department"
																ng-model="newAffiliation.department"
																ng-if="!newAffiliation.university.departments || newAffiliation.university.departments.length === 0"
															)
															ui-select(
																ng-model="newAffiliation.department"
																ng-if="newAffiliation.university.departments.length > 0"
																tagging
																tagging-label="false"
															)
																ui-select-match(
																	placeholder="Department"
																) {{ $select.selected }}
																ui-select-choices(
																	repeat="department in getUniqueUniversityDepartments() | filter: $select.search"
																)
																	span(
																		ng-bind="department"
																	)
													td
														button.btn.btn-primary(
															ng-disabled="affiliationsForm.$invalid || ui.isAddingNewEmail"
															ng-click="addNewEmail()"
														)
															span(
																ng-if="!ui.isAddingNewEmail"
															) Add new email
															span(
																ng-if="ui.isAddingNewEmail"
															)
																i.fa.fa-fw.fa-spin.fa-refresh
																|  Adding...
										hr
							form-messages(for="settingsForm")
								.alert.alert-success(ng-show="settingsForm.response.success")
									|  #{translate("thanks_settings_updated")}
							form-messages(for="changePasswordForm")

							.row
								.col-md-5
									h3 #{translate("update_account_info")}
									form(async-form="settings", name="settingsForm", method="POST", action="/user/settings", novalidate)
										input(type="hidden", name="_csrf", value=csrfToken)
										if !externalAuthenticationSystemUsed()
											.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(user.email),
													ng-model-options="{ updateOn: 'blur' }"
												)
												span.small.text-primary(ng-show="settingsForm.email.$invalid && settingsForm.email.$dirty")
													|  #{translate("must_be_email_address")}
										else
											// show the email, non-editable
											.form-group
												label.control-label #{translate("email")}
												div.form-control(readonly="true") #{user.email}

										if shouldAllowEditingDetails
											.form-group
												label(for='firstName').control-label #{translate("first_name")}
												input.form-control(
													type='text',
													name='first_name',
													value=user.first_name
													ng-non-bindable
												)
											.form-group
												label(for='lastName').control-label #{translate("last_name")}
												input.form-control(
													type='text',
													name='last_name',
													value=user.last_name
													ng-non-bindable
												)
											.actions
												button.btn.btn-primary(
													type='submit',
													ng-disabled="settingsForm.$invalid"
												)  #{translate("update")}
										else
											.form-group
												label.control-label #{translate("first_name")}
												div.form-control(readonly="true") #{user.first_name}
											.form-group
												label.control-label #{translate("last_name")}
												div.form-control(readonly="true") #{user.last_name}

								if !externalAuthenticationSystemUsed()
									.col-md-5.col-md-offset-1
										h3 #{translate("change_password")}
										form(async-form="changepassword", name="changePasswordForm", action="/user/password/update", method="POST", novalidate)
											input(type="hidden", name="_csrf", value=csrfToken)
											.form-group
												label(for='currentPassword') #{translate("current_password")}
												input.form-control(
													type='password',
													name='currentPassword',
													placeholder='*********',
													ng-model="currentPassword",
													required
												)
												span.small.text-primary(ng-show="changePasswordForm.currentPassword.$invalid && changePasswordForm.currentPassword.$dirty")
													| #{translate("required")}
											.form-group
												label(for='newPassword1') #{translate("new_password")}
												input.form-control(
													id='passwordField',
													type='password',
													name='newPassword1',
													placeholder='*********',
													ng-model="newPassword1",
													required,
													complex-password
												)
												span.small.text-primary(ng-show="changePasswordForm.newPassword1.$error.complexPassword && changePasswordForm.newPassword1.$dirty", ng-bind-html="complexPasswordErrorMessage") 
											.form-group
												label(for='newPassword2') #{translate("confirm_new_password")}
												input.form-control(
													type='password',
													name='newPassword2',
													placeholder='*********',
													ng-model="newPassword2",
													equals="passwordField"
												) 
												span.small.text-primary(ng-show="changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$dirty")
													| #{translate("doesnt_match")} 
												span.small.text-primary(ng-show="!changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$invalid && changePasswordForm.newPassword2.$dirty")
													| #{translate("invalid_password")} 
											.actions
												button.btn.btn-primary(
													type='submit',
													ng-disabled="changePasswordForm.$invalid"
												) #{translate("change")}

						

							| !{moduleIncludes("userSettings", locals)}

							//- The beta program doesn't make much sense to include while v2 is going
							//- but we may want to add it back in later
							//- hr
							//-
							//- h3
							//- 	| #{translate("sharelatex_beta_program")}
							//-
							//- if (user.betaProgram)
							//- 	p.small
							//- 		| #{translate("beta_program_already_participating")}
							//-
							//- div
							//- 	a(id="beta-program-participate-link" href="/beta/participate") #{translate("manage_beta_program_membership")}

							hr
	
							h3
								| #{translate("sessions")}

							div
								a(id="sessions-link", href="/user/sessions") #{translate("manage_sessions")}

							hr

							if !externalAuthenticationSystemUsed()

								p.small
									| #{translate("newsletter_info_and_unsubscribe")} 
									a(
										href,
										ng-click="unsubscribe()",
										ng-show="subscribed && !unsubscribing"
									) #{translate("unsubscribe")}
									span(
										ng-show="unsubscribing"
									)
										i.fa.fa-spin.fa-refresh
										| #{translate("unsubscribing")}
									span.text-success(
										ng-show="!subscribed"
									)
										i.fa.fa-check
										| #{translate("unsubscribed")}
				
									p #{translate("need_to_leave")} 
										a(href, ng-click="deleteAccount()")  #{translate("delete_your_account")}


	script(type='text/ng-template', id='deleteAccountModalTemplate')
		.modal-header
			h3 #{translate("delete_account")}
		div.modal-body#delete-account-modal
			p !{translate("delete_account_warning_message_3")}
			form(novalidate, name="deleteAccountForm")
				label #{translate('email')}
				input.form-control(
					type="text",
					autocomplete="off",
					placeholder="",
					ng-model="state.deleteText",
					focus-on="open",
					ng-keyup="checkValidation()"
				)
				label #{translate('password')}
				input.form-control(
					type="password",
					autocomplete="off",
					placeholder="",
					ng-model="state.password",
					ng-keyup="checkValidation()"
				)
			div(ng-if="state.error")
				div.alert.alert-danger
					| #{translate('generic_something_went_wrong')}
			div(ng-if="state.invalidCredentials")
				div.alert.alert-danger
					| #{translate('email_or_password_wrong_try_again')}
		.modal-footer
			button.btn.btn-default(
				ng-click="cancel()"
			) #{translate("cancel")}
			button.btn.btn-danger(
				ng-disabled="!state.isValid || state.inflight"
				ng-click="delete()"
			)
				span(ng-hide="state.inflight") #{translate("delete")}
				span(ng-show="state.inflight") #{translate("deleting")}...
	
	script(type='text/javascript').
		window.passwordStrengthOptions = !{JSON.stringify(settings.passwordStrengthOptions || {})}