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"
						)
							ui-select(
								ng-model="newAffiliation.role"
								tagging
								tagging-label="false"
							)
								ui-select-match(
									placeholder="Role"
								) {{ $select.selected }}
								ui-select-choices(
									repeat="role in roles | filter: $select.search"
								)
									span(
										ng-bind="role"
									)

						.affiliations-form-group(
							ng-if="ui.isValidEmail && newAffiliation.university"
						)
							ui-select(
								ng-model="newAffiliation.department"
								tagging
								tagging-label="false"
							)
								ui-select-match(
									placeholder="Department"
								) {{ $select.selected }}
								ui-select-choices(
									repeat="department in departments | 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