{% if (facebookstatus or twitterstatus or googlestatus or telegramstatus or applestatus or discordstatus or redditstatus or linkedinstatus) %}
<script>
$(document).ready(function() {
	if (typeof jQuery !== 'undefined') {
		if (!$("script[src='{{ script }}']").length) {
			jQuery.getScript('{{ script }}');
		}
		if (!$("link[href='{{ style }}']").length) {
			jQuery("head").append('<link href="' + '{{ style }}' + '" rel="stylesheet"/>');
		}
	}
});
</script>
<div id="column-login" class="popup-social">
	<p class="social_title">{{ sociallogin_titleacc }}</p>
	<div class="social_block">
	{% for provider in providers %}
	{% if (attribute(_context, provider|lower ~ 'status')) %}
		{% set conn = connects[provider].last_login_time %}
		<div class="social-icon account{{ conn is empty ? ' onclick' : ' inactive' }}" data-auth="{{ provider }}" data-toggle="tooltip" title="{{ attribute(_context, 'sociallogin_' ~ provider|lower ~ 'title') }}">
			<div class="social-container-box">
				<a href="javascript:void(0);" class="login-button">
					<span class="login-{{ provider|lower }}-logo">
						<img class="img-responsive" src="{{ attribute(_context, 'sociallogin_' ~ provider|lower ~ 'image') }}" alt="{{ provider }}" title="{{ provider }}">
					</span>
					<span class="network">
						<span class="provider">{{ attribute(_context, 'sociallogin_' ~ provider|lower ~ 'title')|upper }}</span>
						<span class="inserted">{{ conn ? cancel_connection : link_network }}</span>
					</span>
				</a>
			</div>
		</div>
	{% endif %}
	{% endfor %}
	</div>
</div>
<style>
.popup-social .social_block {display:flex;flex-wrap:wrap;margin:4px auto;}
</style>
{% endif %}