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(
				ng-if="!ui.hasError"
			)
				tr(
					ng-repeat="userEmail in userEmails"
				)
					td {{ userEmail.email + (userEmail.default ? ' (default)' : '') }}
					//- td {{ userEmail | json }}
					td 
						div(ng-if="userEmail.affiliation.institution") 
							div {{ userEmail.affiliation.institution.name }}
							a(
								href
								ng-if="!isChangingAffiliation(userEmail.email) && !userEmail.affiliation.role && !userEmail.affiliation.department"
								ng-click="changeAffiliation(userEmail);"
							) Add role and department
							div(
								ng-if="!isChangingAffiliation(userEmail.email) && (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 }}
								|  (
								a(
									href
									ng-click="changeAffiliation(userEmail);"
								) change
								| )
							div(
								ng-if="isChangingAffiliation(userEmail.email)"
							)
								affiliation-form(
									affiliation-data="affiliationToChange"
									show-university-and-country="false"
									show-role-and-department="true"
								)
								.pull-right
									a(
										href
										ng-click="saveAffiliationChange();"
									) Save
									|  or 
									a(
										href
										ng-click="cancelAffiliationChange();"
									) Cancel
					td 
						a(
							href
							ng-if="!userEmail.default"
							ng-click="setDefaultUserEmail(userEmail)"
						) Make default
						br
						a(
							href
							ng-if="!userEmail.default"
							ng-click="removeUserEmail(userEmail)"
						) 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
						affiliation-form(
							affiliation-data="newAffiliation"
							show-university-and-country="ui.showManualUniversitySelectionUI"
							show-role-and-department="ui.isValidEmail && newAffiliation.university"
						)
					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...
			tbody(
				ng-if="ui.hasError"
			)
				tr.affiliations-table-error-row(
					ng-if="true"
				)
					td.text-center(colspan="3") 
						div
							i.fa.fa-fw.fa-exclamation-triangle 
							|  An error has occurred while performing your request.
						div
							| Click 
							a(
								href
								ng-click="acknowledgeError();"
							) here
							|  to reload your emails and affiliations.
				
		hr

script(type="text/ng-template", id="affiliationFormTpl")
	.affiliations-form-group(
		ng-if="$ctrl.showUniversityAndCountry"
	)
		ui-select(
			ng-model="$ctrl.affiliationData.country"
		)
			ui-select-match(
				placeholder="Country"
			) {{ $select.selected.name }}
			ui-select-choices(
				repeat="country in $ctrl.countries | filter: $select.search"
			)
				span(
					ng-bind="country.name"
				)
	.affiliations-form-group(
		ng-if="$ctrl.showUniversityAndCountry"
	)
		ui-select(
			ng-model="$ctrl.affiliationData.university"
			ng-disabled="!$ctrl.affiliationData.country"
			tagging="$ctrladdUniversityToSelection"
			tagging-label="false"
		)
			ui-select-match(
				placeholder="Institution"
			) {{ $select.selected.name }}
			ui-select-choices(
				repeat="university in $ctrl.universities | filter: $select.search"
			)
				span(
					ng-bind="university.name"
				)
	.affiliations-form-group(
		ng-if="$ctrl.showRoleAndDepartment"
	)
		ui-select(
			ng-model="$ctrl.affiliationData.role"
			tagging
			tagging-label="false"
		)
			ui-select-match(
				placeholder="Role"
			) {{ $select.selected }}
			ui-select-choices(
				repeat="role in $ctrl.roles | filter: $select.search"
			)
				span(
					ng-bind="role"
				)

	.affiliations-form-group(
		ng-if="$ctrl.showRoleAndDepartment"
	)
		ui-select(
			ng-model="$ctrl.affiliationData.department"
			tagging
			tagging-label="false"
		)
			ui-select-match(
				placeholder="Department"
			) {{ $select.selected }}
			ui-select-choices(
				repeat="department in $ctrl.departments | filter: $select.search"
			)
				span(
					ng-bind="department"
				)