form.row( ng-controller="UserAffiliationsController" name="affiliationsForm" ) .col-md-12 h3 #{translate("emails_and_affiliations_title")} p.small #{translate("emails_and_affiliations_explanation")} table.table.affiliations-table thead tr th.affiliations-table-email #{translate("email")} th.affiliations-table-institution #{translate("institution_and_role")} th.affiliations-table-inline-actions tbody tr( ng-repeat="userEmail in userEmails" ) td | {{ userEmail.email + (userEmail.default ? ' (default)' : '') }} div(ng-if="!userEmail.confirmedAt").small strong #{translate('unconfirmed')}. | | #{translate('please_check_your_inbox')}. br a( href, ng-click="resendConfirmationEmail(userEmail)" ) #{translate('resend_confirmation_email')} div(ng-if="userEmail.confirmedAt && userEmail.affiliation.institution && userEmail.affiliation.institution.confirmed && userEmail.affiliation.institution.licence != 'free'").small span.label.label-primary #{translate("professional")} td div(ng-if="userEmail.affiliation.institution") div {{ userEmail.affiliation.institution.name }} span.small a( href ng-if="!isChangingAffiliation(userEmail.email) && !userEmail.affiliation.role && !userEmail.affiliation.department" ng-click="changeAffiliation(userEmail);" ) #{translate("add_role_and_department")} div.small( 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 }} br a( href ng-click="changeAffiliation(userEmail);" ) #{translate("change")} .affiliation-change-container( ng-if="isChangingAffiliation(userEmail.email)" ) affiliation-form( affiliation-data="affiliationToChange" show-university-and-country="false" show-role-and-department="true" ) .affiliation-change-actions.small button.btn.btn-sm.btn-success( ng-click="saveAffiliationChange(userEmail);" ng-disabled="!(affiliationToChange.role && affiliationToChange.department)" ) #{translate("save_or_cancel-save")} |  #{translate("save_or_cancel-or" )}  a( href ng-click="cancelAffiliationChange();" ) #{translate("save_or_cancel-cancel")} td.affiliations-table-inline-actions // Disabled buttons don't work with tooltips, due to pointer-events: none, // so create a wrapper for the tooltip div.affiliations-table-inline-action-disabled-wrapper( tooltip=translate("please_confirm_your_email_before_making_it_default") tooltip-enable="!ui.isMakingRequest" ng-if="!userEmail.default && (!userEmail.confirmedAt || ui.isMakingRequest)" ) button.btn.btn-sm.btn-success.affiliations-table-inline-action( disabled ) #{translate("make_default")} button.btn.btn-sm.btn-success.affiliations-table-inline-action( ng-if="!userEmail.default && (userEmail.confirmedAt && !ui.isMakingRequest)" ng-click="setDefaultUserEmail(userEmail)" ) #{translate("make_default")} |   button.btn.btn-sm.btn-danger.affiliations-table-inline-action( ng-if="!userEmail.default" ng-click="removeUserEmail(userEmail)" ng-disabled="ui.isMakingRequest" tooltip=translate("remove") ) i.fa.fa-fw.fa-trash(aria-hidden="true") span.sr-only #{translate("remove")} tr.affiliations-table-highlighted-row( ng-if="!ui.showAddEmailUI && !ui.isMakingRequest" ) td(colspan="3") a( href ng-click="showAddEmailForm()" ) #{translate("add_another_email")} tr.affiliations-table-highlighted-row( ng-if="ui.showAddEmailUI && !ui.isLoadingEmails" ) 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 p.affiliations-table-label( ng-if="newAffiliation.university && !ui.showManualUniversitySelectionUI" ) | {{ newAffiliation.university.name }} span.small | ( a( href ng-click="selectUniversityManually();" ) #{translate("change")} | ) .affiliations-table-label( ng-if="!newAffiliation.university && !ui.isValidEmail && !ui.showManualUniversitySelectionUI" ) #{translate("start_by_adding_your_email")} .affiliations-table-label( ng-if="!newAffiliation.university && ui.isValidEmail && !ui.isBlacklistedEmail && !ui.showManualUniversitySelectionUI" ) | #{translate("is_email_affiliated")} br a( href ng-click="selectUniversityManually();" ) #{translate("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-sm.btn-primary( ng-disabled="affiliationsForm.$invalid || ui.isMakingRequest" ng-click="addNewEmail()" ) | #{translate("add_new_email")} tr.affiliations-table-highlighted-row( ng-if="ui.isMakingRequest" ) td.text-center(colspan="3", ng-if="ui.isLoadingEmails") i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true") |  #{translate("loading")}... td.text-center(colspan="3", ng-if="ui.isResendingConfirmation") i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true") |  #{translate("sending")}... td.text-center(colspan="3", ng-if="!ui.isLoadingEmails && !ui.isResendingConfirmation") i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true") |  #{translate("saving")}... tr.affiliations-table-error-row( ng-if="ui.hasError" ) td.text-center(colspan="3") div i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true") span(ng-if="!ui.errorMessage")  #{translate("error_performing_request")} span(ng-if="ui.errorMessage")  {{ui.errorMessage}} 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="$ctrl.addUniversityToSelection" tagging-label="false" ) ui-select-match( placeholder="Institution" ) {{ $select.selected.name }} ui-select-choices( repeat="university in $ctrl.universities | filter: $select.search" refresh="$ctrl.handleFreeformInputChange($select, 'name');" refresh-delay="10" ) 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" refresh="$ctrl.handleFreeformInputChange($select);" refresh-delay="10" ) 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" refresh="$ctrl.handleFreeformInputChange($select);" refresh-delay="10" ) span( ng-bind="department" )