<div class="b-settings-social g-ui-user-select-none">
	<div class="form-horizontal" data-bind="visible: googleEnable() && googleEnableAuth()">
		<div class="legend">
			<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/LEGEND_GOOGLE"></span>
		</div>
		<div class="control-group" data-bind="visible: !googleLoggined()">
			<button class="btn" data-bind="command: connectGoogle">
				<i class="icon-google" data-bind="visible: !googleActions()"></i>
				<i class="icon-spinner animated" data-bind="visible: googleActions()"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/BUTTON_GOOGLE_CONNECT"></span>
			</button>
			<br />
			<br />
			<blockquote>
				<p class="i18n muted" style="width: 500px" data-i18n-text="SETTINGS_SOCIAL/MAIN_GOOGLE_DESC"></p>
			</blockquote>
		</div>
		<div class="control-group" data-bind="visible: googleLoggined">
			<strong>
				<i class="icon-google"></i>
				&nbsp;&nbsp;
				<span data-bind="text: googleUserName"></span>
			</strong>
			<br />
			<br />
			<button class="btn" data-bind="command: disconnectGoogle">
				<i class="icon-remove" data-bind="visible: !googleActions()"></i>
				<i class="icon-spinner animated" data-bind="visible: googleActions()"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/BUTTON_GOOGLE_DISCONNECT"></span>
			</button>
		</div>
	</div>
	<div class="form-horizontal" data-bind="visible: facebookEnable">
		<div class="legend">
			<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/LEGEND_FACEBOOK"></span>
		</div>
		<div class="control-group" data-bind="visible: !facebookLoggined()">
			<button class="btn" data-bind="command: connectFacebook">
				<i class="icon-facebook" data-bind="visible: !facebookActions()"></i>
				<i class="icon-spinner animated" data-bind="visible: facebookActions()"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/BUTTON_FACEBOOK_CONNECT"></span>
			</button>
			<br />
			<br />
			<blockquote>
				<p class="i18n muted" style="width: 500px" data-i18n-text="SETTINGS_SOCIAL/MAIN_FACEBOOK_DESC"></p>
			</blockquote>
		</div>
		<div class="control-group" data-bind="visible: facebookLoggined">
			<strong>
				<i class="icon-facebook"></i>
				&nbsp;&nbsp;
				<span data-bind="text: facebookUserName"></span>
			</strong>
			<br />
			<br />
			<button class="btn" data-bind="command: disconnectFacebook">
				<i class="icon-remove" data-bind="visible: !facebookActions()"></i>
				<i class="icon-spinner animated" data-bind="visible: facebookActions()"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/BUTTON_FACEBOOK_DISCONNECT"></span>
			</button>
		</div>
	</div>
	<div class="form-horizontal" data-bind="visible: twitterEnable">
		<div class="legend">
			<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/LEGEND_TWITTER"></span>
		</div>
		<div class="control-group" data-bind="visible: !twitterLoggined()">
			<button class="btn" data-bind="command: connectTwitter">
				<i class="icon-twitter" data-bind="visible: !twitterActions()"></i>
				<i class="icon-spinner animated" data-bind="visible: twitterActions()"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/BUTTON_TWITTER_CONNECT"></span>
			</button>
			<br />
			<br />
			<blockquote>
				<p class="i18n muted" style="width: 500px" data-i18n-text="SETTINGS_SOCIAL/MAIN_TWITTER_DESC"></p>
			</blockquote>
		</div>
		<div class="control-group" data-bind="visible: twitterLoggined">
			<strong>
				<i class="icon-twitter"></i>
				&nbsp;&nbsp;
				<span data-bind="text: twitterUserName"></span>
			</strong>
			<br />
			<br />
			<button class="btn" data-bind="command: disconnectTwitter">
				<i class="icon-remove" data-bind="visible: !twitterActions()"></i>
				<i class="icon-spinner animated" data-bind="visible: twitterActions()"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_SOCIAL/BUTTON_TWITTER_DISCONNECT"></span>
			</button>
		</div>
	</div>
</div>