<div class="b-login-content">
	<div class="loginFormWrapper" data-bind="css: {'afterLoginHide': formHidden}">
		<center class="plugin-mark-Login-BeforeLogo">
			{{INCLUDE/BeforeLogo/PLACE}}
			<!-- ko if: logoImg -->
			<div class="logoWrapper plugin-mark-Login-AfterLogo">
				<img class="logoImg" data-bind="attr: {'src': logoImg }" />
			</div>
			<!-- /ko -->
			<div class="descWrapper thm-login-desc plugin-mark-Login-AfterLogoDescription" 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>
			<div class="wrapper-parent">
				<div class="wrapper loginWelcomeForm thm-login-text" data-bind="css: {'welcome-on': welcome}">
					<!-- ko template: { name: 'LoginWelcome' } --><!-- /ko -->
				</div>
				<form class="wrapper submitting-pane loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'welcome-off': welcome, 'submitting': submitRequest()}">
					{{INCLUDE/TopControlGroup/PLACE}}
					<div class="controls plugin-mark-Login-TopControlGroup" data-bind="css: {'error': emailError, 'animated': emailErrorAnimation}">
						<div class="input-append">
							<input type="email" class="i18n input-block-level inputEmail checkAutocomplete"
								name="RainLoopEmail" id="RainLoopEmail"
								style="padding-right: 35px;"
								autocorrect="off" autocapitalize="off" spellcheck="false"
								data-bind="textInput: email, hasFocus: emailFocus, disable: submitRequest" 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, 'animated': passwordErrorAnimation}">
						<div class="input-append">
							<input type="password" class="i18n input-block-level inputPassword checkAutocomplete"
								name="RainLoopPassword" id="RainLoopPassword"
								style="padding-right: 35px;"
								autocorrect="off" autocapitalize="off" spellcheck="false"
								data-bind="textInput: password, hasFocus: passwordFocus, disable: submitRequest" 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, 'animated': additionalCode.errorAnimation}">
						<div class="input-append">
							<input type="text" class="i18n input-block-level inputAdditionalCode"
								autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
								style="padding-right: 35px;"
								data-bind="textInput: additionalCode, hasFocus: additionalCode.focused, disable: submitRequest" data-i18n="[placeholder]LOGIN/LABEL_VERIFICATION_CODE" />
							<span class="add-on">
								<i class="icon-key"></i>
							</span>
						</div>
					</div>
					<div class="controls plugin-mark-Login-BottomControlGroup" data-bind="visible: additionalCode.visibility()">
						<div class="additionalCodeSignMeLabel" data-bind="component: {
							name: 'CheckboxSimple',
							params: {
								label: 'LOGIN/LABEL_DONT_ASK_VERIFICATION_CODE',
								value: additionalCodeSignMe
							}
						}"></div>
					</div>
					{{INCLUDE/BottomControlGroup/PLACE}}
					<div class="controls">
						<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand, hasFocus: submitFocus">
							<span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN"></span>
						</button>
					</div>
					<div class="controls clearfix" style="margin-bottom: 20px">
						<div class="pull-right social-buttons">
							<a href="#" tabindex="-1" class="social-button" data-bind="visible: facebookLoginEnabled, command: facebookCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_FACEBOOK'">
								<i class="icon-facebook-alt"></i>
							</a>
							<a href="#" tabindex="-1" class="social-button" data-bind="visible: googleLoginEnabled, command: googleCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_GOOGLE'">
								<i class="icon-google"></i>
							</a>
							<a href="#" tabindex="-1" class="social-button" data-bind="visible: twitterLoginEnabled, command: twitterCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_TWITTER'">
								<i class="icon-twitter"></i>
							</a>
							<a href="#" tabindex="-1" class="language-button" data-bind="visible: allowLanguagesOnLogin() && !socialLoginEnabled(), click: selectLanguage, tooltip: 'POPUPS_LANGUAGES/TITLE_LANGUAGES'">
								<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
							</a>
						</div>

						<div class="signMeLabel" data-bind="visible: signMeVisibility, component: {
							name: 'CheckboxSimple',
							params: {
								label: 'LOGIN/LABEL_SIGN_ME',
								labelAnimated: true,
								value: signMe
							}
						}"></div>

					</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="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="LOGIN/LABEL_REGISTRATION"></span></a>
						</div>
					</div>
				</form>
			</div>
			<div class="e-powered thm-powered" data-bind="visible: logoPowered">Powered by <a href="http://www.rainloop.net" target="_blank">RainLoop</a></div>
			<div class="e-mobile-switcher thm-mobile-switcher">
				<span data-bind="visible: !mobile && mobileDevice">
					<i class="icon-mobile"></i>
					&nbsp;
					<a href="./?/Mobile/" tabindex="-1">
						<span class="i18n" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></span>
					</a>
				</span>
				<span data-bind="visible: mobile">
					<i class="icon-laptop"></i>
					&nbsp;
					<a href="./?/SkipMobile/" tabindex="-1">
						<span class="i18n" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
					</a>
				</span>
			</div>
			<div class="e-languages thm-languages plugin-mark-Login-BottomFooter" data-bind="visible: allowLanguagesOnLogin() && socialLoginEnabled()">
				<label class="flag-selector">
					<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
					&nbsp;&nbsp;
					<span class="flag-name" tabindex="0" data-bind="text: languageFullName, click: selectLanguage, onSpace: selectLanguage, onEnter: selectLanguage, onTab: selectLanguageOnTab"></span>
				</label>
			</div>
			{{INCLUDE/BottomFooter/PLACE}}
		</center>
	</div>
	<a href="#" onclick="return false;"></a>
	<div class="loginAfter"></div>
</div>