@if (socialLinks$ | async; as socialLinks) {
	@if (socialLinks.length > 0) {
		<div class="links" aria-label="Social SignIn">
			{{ 'LOGIN_PAGE.OR_SIGN_IN_WITH' | translate }}
			<div class="socials">
				@for (socialLink of socialLinks; track socialLink) {
					@if (socialLink.link) {
						<a [routerLink]="socialLink.link" [attr.target]="socialLink.target" class="social-link">
							@if (socialLink.icon) {
								<nb-icon [icon]="socialLink.icon"></nb-icon>
							} @else {
								{{ socialLink.title }}
							}
						</a>
					}
					@if (socialLink.url) {
						<a [attr.href]="socialLink.url" [attr.target]="socialLink.target" class="social-link">
							@if (socialLink.icon) {
								<nb-icon [icon]="socialLink.icon"></nb-icon>
							} @else {
								{{ socialLink.title }}
							}
						</a>
					}
				}
			</div>
		</div>
	}
}