<template name="loginForm">
	{{#if state 'sandstorm'}}
		<div class="alert error-color error-background error-border">
			You must login to Sandstorm (on the top right) in order to access this chat.
		</div>
	{{else}}
		<form id="login-card" class="content-background-color color-primary-font-color" method='/' novalidate>
			{{#if state 'wait-activation'}}
				<header>
					<h2 data-i18n="Registration_Succeeded">{{{_ "Registration_Succeeded"}}}</h2>
					<p>{{{_ "Wait_activation_warning"}}}</p>
					<p>{{{_ "Please_wait_activation"}}}</p>
				</header>
			{{else}}
				{{> loginServices }}
				{{#if needsValidateEmail}}
					<div class="alert error-color error-background error-border">
						{{_ "You_need_confirm_email"}}
					</div>
				{{/if}}
				{{#if showFormLogin}}
					<div class="fields">
						{{#if state 'login'}}
							<div class="rc-input">
								<label class="rc-input__label" for="emailOrUsername">
									<div class="rc-input__wrapper">
										<input name="emailOrUsername" id="emailOrUsername" type="text" class="rc-input__element"
											autocapitalize="off" autocorrect="off"
											placeholder="{{emailOrUsernamePlaceholder}}" autofocus>
										<div class="input-error"></div>
									</div>
								</label>
								{{#if hasOnePassword}}
									<div class="one-passsword"></div>
								{{/if}}
							</div>
							<div class="rc-input">
								<label class="rc-input__label" for="pass">
									<div class="rc-input__wrapper">
										<input name="pass" id="pass" type="password" class="rc-input__element"
											autocapitalize="off" autocorrect="off"
											placeholder="{{passwordPlaceholder}}" autofocus>
										<div class="input-error"></div>
									</div>
								</label>
							</div>
						{{/if}}
						{{#if state 'register'}}
						<div class="rc-input">
							<label class="rc-input__label" for="name">
							<div class="rc-input__wrapper">
								<input name="name" id="name" type="text" class="rc-input__element"
									autocapitalize="off" autocorrect="off"
									placeholder="{{namePlaceholder}}" autofocus>
								<div class="input-error"></div>
							</div>
						</label>
						</div>
						<div class="rc-input">
							<label class="rc-input__label" for="email">
								<div class="rc-input__wrapper">
									<input name="email" id="email" type="text" class="rc-input__element"
										autocapitalize="off" autocorrect="off"
										placeholder="{{_ "Email"}}" autofocus>
									<div class="input-error"></div>
								</div>
							</label>
						</div>

							{{> customFieldsForm hideFromForm=true}}

							<div class="rc-input">
								<label class="rc-input__label" for="pass">
									<div class="rc-input__wrapper">
										<input name="pass" id="pass" type="password" class="rc-input__element"
											autocapitalize="off" autocorrect="off"
											placeholder="{{passwordPlaceholder}}" autofocus>
										<div class="input-error"></div>
									</div>
								</label>
							</div>
							{{#if requirePasswordConfirmation}}
							<div class="rc-input">
								<label class="rc-input__label" for="confirm-pass">
									<div class="rc-input__wrapper">
										<input name="confirm-pass" id="confirm-pass" type="password" class="rc-input__element"
											autocapitalize="off" autocorrect="off"
											placeholder="{{confirmPasswordPlaceholder}}" autofocus>
										<div class="input-error"></div>
									</div>
								</label>
							</div>
							{{/if}}
							{{#if manuallyApproveNewUsers}}
								<div class="rc-input">
									<label class="rc-input__label" for="confirm-pass">
										<div class="rc-input__wrapper">
											<input name="reason" id="reason" type="text" class="rc-input__element"
												autocapitalize="off" autocorrect="off"
												placeholder="{{_ 'Reason_To_Join'}}" autofocus>
											<div class="input-error"></div>
										</div>
									</label>
								</div>
							{{/if}}
						{{/if}}
						{{#if state 'forgot-password' 'email-verification'}}
						<div class="rc-input">
							<label class="rc-input__label" for="email">
							<div class="rc-input__wrapper">
								<input name="email" id="email" type="text" class="rc-input__element"
									autocapitalize="off" autocorrect="off"
									placeholder="{{_ "Email"}}" autofocus>
									<div class="input-error"></div>
								</div>
							</label>
						</div>
						{{/if}}
					</div>
						<div class="submit">
							<button class='rc-button rc-button--primary login'><span>{{btnLoginSave}}</span></button>
						</div>
						{{#if state 'login'}}
							{{#if registrationAllowed}}
								<div>
									<button type="button" class="register">{{_ 'Register'}}</button>
								</div>
							{{else}}
								{{#if linkReplacementText}}
									<div class="register-link-replacement">
										{{{linkReplacementText}}}
									</div>
								{{/if}}
							{{/if}}
							{{#if passwordResetAllowed}}
								<div>
									<button type="button" class="forgot-password">{{_ 'Forgot_password'}}</button>
								</div>
							{{/if}}
						{{/if}}
				{{/if}}
			{{/if}}
			{{#unless state 'login'}}
				<div>
					<button type="button" class="back-to-login">{{_ 'Back_to_login'}}</button>
				</div>
			{{/unless}}
		</form>
		<div class='login-terms'>
			{{{loginTerms}}}
			<div class="powered-by">
				Powered by <a class="color-tertiary-font-color" href="https://rocket.chat">Open Source Chat Platform Rocket.Chat</a>.
			</div>
		</div>
	{{/if}}
</template>
