block head-scripts
	script(type='text/javascript').
		window.oauthProviders = !{StringHelper.stringifyJsonForScript(oauthProviders)}
		window.thirdPartyIds = !{StringHelper.stringifyJsonForScript(thirdPartyIds)}

mixin providerList()
	ul.list-like-table
		li(ng-repeat="(key, provider) in providers" ng-if="!provider.hideWhenNotLinked || (provider.hideWhenNotLinked && thirdPartyIds[key])")
			.row
				.col-xs-12.col-sm-8.col-md-10
					h4 {{provider.name}}
					p.small(ng-bind-html="provider.description")
				.col-xs-2.col-sm-4.col-md-2.text-right
					//- Unlink
					button.btn.btn-default(
						ng-click="unlink(key)"
						ng-disabled="providers[key].ui.isProcessing"
						ng-if="thirdPartyIds[key]"
					)
						span(ng-if="!providers[key].ui.isProcessing") #{translate("unlink")}
						span(ng-if="providers[key].ui.isProcessing") #{translate("processing")}
					//- Link
					a.btn.btn-primary.text-capitalize(
						href="{{provider.linkPath}}?intent=link"
						ng-if="!thirdPartyIds[key] && !provider.hideWhenNotLinked"
					) #{translate("link")}
			//- unlink error
			.row(
				ng-if="providers[key].ui.hasError"
			)
				.col-sm-12
					//- to do: fix CSS so that we don't need inline styling
					.alert.alert-danger(
						ng-if="providers[key].ui.hasError"
						style="display: block; margin-bottom: 10px;"
					)
						i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true")  
						| {{providers[key].ui.errorMessage}}
.row(
	ng-controller="UserOauthController"
	ng-cloak
)
	.col-xs-12
		h3.text-capitalize#linked-accounts #{translate("linked_accounts")}
		p.small #{translate("linked_accounts_explained", {appName:'{{settings.appName}}'})}
		+providerList()