<style data-bind="csstext: logoCss"></style>
<div class="b-login-content">
	<div class="loginFormWrapper">
		<center>
			{{INCLUDE/BeforeLogo/PLACE}}
			<!-- ko if: logoImg -->
			<div class="logoWrapper">
				<img class="logoImg" data-bind="attr: {'src': logoImg }" />
			</div>
			<!-- /ko -->
			<div class="descWrapper thm-login-desc" data-bind="visible: '' !== loginDescription">
				<span class="desc" data-bind="text: loginDescription"></span>
			</div>
			{{INCLUDE/AfterLogo/PLACE}}
			<div class="alert alertError" data-bind="visible: '' !== submitError()">
				<button type="button" class="close" data-bind="click: function () { submitError('') }">&times;</button>
				<span data-bind="text: submitError"></span>
				<div data-bind="visible: '' !== submitErrorAddidional()">
					<br />
					<span data-bind="text: submitErrorAddidional"></span>
				</div>
			</div>
			<form class="wrapper loginForm thm-login" action="#/" data-bind="submit: submitForm">
				{{INCLUDE/TopControlGroup/PLACE}}
				<div class="controls" data-bind="css: {'error': emailError}">
					<div class="input-append">
						<input type="email" class="i18n input-block-level inputEmail checkAutocomplete" name="RainLoopEmail" id="RainLoopEmail"
							autocorrect="off" autocapitalize="off" spellcheck="false"
							data-bind="textInput: email, hasFocus: emailFocus" data-i18n-placeholder="LOGIN/LABEL_EMAIL" />
						<span class="add-on">
							<i class="icon-mail"></i>
						</span>
					</div>
				</div>
				<div class="controls" data-bind="css: {'error': passwordError}">
					<div class="input-append">
						<input type="password" class="i18n input-block-level inputPassword checkAutocomplete" name="RainLoopPassword" id="RainLoopPassword"
							autocorrect="off" autocapitalize="off" spellcheck="false"
							data-bind="textInput: password" data-i18n-placeholder="LOGIN/LABEL_PASSWORD" />
						<span class="add-on">
							<i class="icon-key"></i>
						</span>
					</div>
				</div>
				<div class="controls" data-bind="visible: additionalCode.visibility(), css: {'error': additionalCode.error}">
					<div class="input-append">
						<input type="text" class="i18n input-block-level inputAdditionalCode" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
							data-bind="textInput: additionalCode, hasFocus: additionalCode.focused" data-i18n-placeholder="LOGIN/LABEL_VERIFICATION_CODE" />
						<span class="add-on">
							<i class="icon-key"></i>
						</span>
					</div>
				</div>
				<div class="controls" data-bind="visible: additionalCode.visibility()">
					<label class="additionalCodeSignMeLabel" data-bind="click: function () { additionalCodeSignMe(!additionalCodeSignMe()); }">
						<i data-bind="css: additionalCodeSignMe() ? 'checkboxAdditionalCodeSignMe icon-checkbox-checked' : 'checkboxAdditionalCodeSignMe icon-checkbox-unchecked'"></i>
						&nbsp;&nbsp;
						<span class="i18n" data-i18n-text="LOGIN/LABEL_DONT_ASK_VERIFICATION_CODE"></span>
					</label>
				</div>
				{{INCLUDE/BottomControlGroup/PLACE}}
				<div class="controls">
					<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand">
						<i class="icon-spinner animated" data-bind="visible: submitRequest"></i>
						<span class="i18n i18n-animation" data-i18n-text="LOGIN/BUTTON_SIGN_IN" data-bind="visible: !submitRequest()"></span>
					</button>
				</div>
				<div class="controls">
					<div class="pull-right social-buttons">
						<a href="#" tabindex="-1" class="social-button" data-bind="command: facebookCommand, visible: facebookLoginEnabled, tooltip: 'LOGIN/TITLE_SIGN_IN_FACEBOOK'">
							<i class="icon-facebook-alt"></i>
						</a>
						<a href="#" tabindex="-1" class="social-button" data-bind="command: googleCommand, visible: googleLoginEnabled, tooltip: 'LOGIN/TITLE_SIGN_IN_GOOGLE'">
							<i class="icon-google"></i>
						</a>
						<a href="#" tabindex="-1" class="social-button" data-bind="command: twitterCommand, visible: twitterLoginEnabled, tooltip: 'LOGIN/TITLE_SIGN_IN_TWITTER'">
							<i class="icon-twitter"></i>
						</a>
						<a href="#" tabindex="-1" class="language-button" data-bind="click: selectLanguage, tooltip: 'POPUPS_LANGUAGES/TITLE_LANGUAGES',
								visible: allowLanguagesOnLogin() && !socialLoginEnabled()">
							<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
						</a>
					</div>
					<label class="signMeLabel inline" data-bind="click: function () { signMe(!signMe()); }, visible: signMeVisibility">
						<i data-bind="css: signMe() ? 'checkboxSignMe icon-checkbox-checked' : 'checkboxSignMe icon-checkbox-unchecked'"></i>
						&nbsp;&nbsp;
						<span class="i18n i18n-animation" data-i18n-text="LOGIN/LABEL_SIGN_ME"></span>
					</label>
				</div>
				<div class="controls clearfix" data-bind="visible: '' !== forgotPasswordLinkUrl || '' !== registrationLinkUrl">
					<div class="forgot-link thm-forgot pull-left" data-bind="visible: '' !== forgotPasswordLinkUrl" style="text-align: center">
						<a href="#" target="_blank" class="g-ui-link" data-bind="attr: {href: forgotPasswordLinkUrl}, css: {'pull-right': '' !== registrationLinkUrl}"
							><span class="i18n" data-i18n-text="LOGIN/LABEL_FORGOT_PASSWORD"></span></a>
					</div>
					&nbsp;
					<div class="registration-link thm-registration pull-right" data-bind="visible: '' !== registrationLinkUrl" style="text-align: center">
						<a href="#" target="_blank" class="g-ui-link" data-bind="attr: {href: registrationLinkUrl}, css: {'pull-left': '' !== forgotPasswordLinkUrl}"
							><span class="i18n" data-i18n-text="LOGIN/LABEL_REGISTRATION"></span></a>
					</div>
				</div>
			</form>
			<div class="e-powered thm-powered" data-bind="visible: logoPowered">
				Powered by <a href="http://rainloop.net" target="_blank">RainLoop</a>
			</div>
			<div class="e-languages thm-languages" data-bind="visible: allowLanguagesOnLogin() && socialLoginEnabled()">
				<label class="flag-selector">
					<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
					&nbsp;
					<span class="flag-name" data-bind="text: mainLanguageFullName, click: selectLanguage"></span>
				</label>
			</div>
		</div>
	</center>
	<div class="loginAfter"></div>
</div>