.sign-in-box.mx-auto.text-center
	p.lead
		| Sign in with your social site account

	div(*ngIf="signUpProviders.length")
		.sign-in-heading
			span(aria-hidden="true") Sign in #[i or] sign up

		.sign-in-box-providers
			button.btn.btn-lg.btn-dark(
				*ngFor="let p of signUpProviders"
				(click)="signInTo(p)"
				[class.disabled]="p.disabled"
				[style.border-bottom-color]="p.color"
				title="Sign in using {{p.name}}")
				fa-icon([icon]="icon(p.id)" [fixedWidth]="true" size="lg")
				.visually-hidden Sign in or sign up using {{p.name}}

	div(*ngIf="signInProviders.length")
		.sign-in-heading
			span(aria-hidden="true") Sign in #[i only]

		.text-muted.mb-3 (You #[b cannot] use these social sites to create new account)

		.sign-in-box-providers.sign-in-only
			button.btn.btn-lg.btn-dark(
				*ngFor="let p of signInProviders"
				(click)="signInTo(p)"
				[class.disabled]="p.disabled"
				[style.border-bottom-color]="p.color"
				title="Sign in using {{p.name}}")
				fa-icon([icon]="icon(p.id)" [fixedWidth]="true" size="lg")
				.visually-hidden Sign in using {{p.name}}

	div(*ngIf="local")
		div(*ngIf="mocks === undefined")
			fa-icon([icon]="spinnerIcon" [fixedWidth]="true" animation="spin")
			| Loading mock logins
		.btn-group.dropdown(dropdown *ngIf="mocks !== undefined")
			button.btn.btn-lg.btn-dark.dropdown-toggle(dropdownToggle)
				| Mock login
			.dropdown-menu(*dropdownMenu)
				a.dropdown-item(*ngFor="let a of mocks" [href]="'/auth/local?password=x&username=' + a[0]" target="_self") {{ a[1]}}
				a.dropdown-item((click)="createNew()") Create new