form.row(
	ng-controller="UserOauthController"
	name="oauthForm"
	ng-cloak
)
	.col-xs-12
		h3.text-capitalize #{translate("linked_accounts")}
		p.small #{translate("linked_accounts_explained", {appName:'{{settings.appName}}'})}

		div.text-center(ng-if="ui.isLoadingProviders") 
			i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true")
			|  #{translate("loading")}...

		ul(
			class="list-like-table"
			ng-if="ui.isLoadingProviders == false && ui.hasError == false"
		)
			li(ng-repeat="provider in providers")
				.row
					.col-xs-12.col-sm-8.col-md-10
						h4 {{provider.name}}
						p.small(ng-if="provider.key != 'orcid'")
							| #{translate("login_with_service", {service:'{{provider.name}}'})}
						p.small(ng-if="provider.key == 'orcid'")
							| !{translate('oauth_orcid_description', {link: '/blog/434'})}
					.col-xs-2.col-sm-4.col-md-2.text-right
						button.btn.btn-default(ng-if="userProviders[provider.key]") #{translate("unlink")}
						button.btn.btn-primary(ng-if="!userProviders[provider.key]")  #{translate("link")}

		.alert.alert-danger(
			ng-if="ui.hasError"
		)
			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}}