<template name="accountTasks">
	<div class="modal account-tasks" tabindex="-1" role="dialog" id="accountTasks">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">
						{{#if activeAccountTask 'login'}}
							{{#if pleaseLogin}}
								<i class="fa fa-exclamation-circle fa-fw" aria-hidden="true"></i>
								{{mf 'Please.login' 'Please login or register'}}
							{{else}}
								<i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>
								{{mf 'login.login.title' 'Login'}}
							{{/if}}
						{{/if}}
						{{#if activeAccountTask 'register'}}
							<i class="fa fa-user-plus fa-fw" aria-hidden="true"></i>
							{{mf 'login.register.submit'}}
						{{/if}}
						{{#if activeAccountTask 'recoverPwd'}}
							<i class="fa fa-unlock-alt fa-fw" aria-hidden="true"></i>
							{{mf 'login.recoverPwd.title' 'Recover Password'}}
						{{/if}}
						<span class="close" data-dismiss="modal">&times;</span>
					</h4>
				</div>
				<div class="modal-body">
					{{#if activeAccountTask 'register'}}
						{{> registerFrame}}
					{{else}}
						{{#if activeAccountTask 'recoverPwd'}}
							{{> forgotPwdFrame}}
						{{else}}
							{{> loginFrame}}
						{{/if}}
					{{/if}}
				</div>
			</div>
		</div>
	</div>
</template>

<template name="loginFrame">
	<form>
		<div class="login">
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon">
						<span class="fa fa-user fa-fw" aria-hidden="true"></span>
					</span>
					<input class="form-control"
					       id="loginName"
					       placeholder={{mf 'frame.login.usernameOrEmail' 'Username or Email'}}
					       type="text"
					/>
				</div>
			</div>
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon">
						<span class="fa fa-lock fa-fw" aria-hidden="true"></span>
					</span>
					<input class="form-control"
					       id="loginPassword"
					       placeholder="{{mf '_inputField.password'}}"
					       type="password"
					/>
				</div>
			</div>
			<div class="form-group forgot-pwd-btn-container">
				<button type="button" class="btn btn-link js-forgot-pwd-btn">
					<span class="fa fa-exclamation-circle fa-fw" aria-hidden="true"></span>
					{{mf 'forgot' "I forgot my password"}}
				</button>
			</div>
			<div class="form-group">
				<button type="submit" class='btn btn-default js-login form-control' {{disabledIfBusy}}>
					{{#if busy 'logging-in'}}
						<span class="fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"></span>
						{{mf 'login.login.submit.busy' 'Logging in...'}}
					{{else}}
						<span class="fa fa-sign-in fa-fw" aria-hidden="true"></span>
						{{#if pleaseLogin}}
							{{loginAction}}
						{{else}}
							{{mf 'login.login.submit' 'Login'}}
						{{/if}}
					{{/if}}
				</button>
			</div>
			<hr>
			<div class="form-group">
				{{#each service in OAuthServices}}
					<button
						class="btn btn-{{service.key}} form-control js-oauth-btn"
					    data-service="{{service.serviceName}}"
					    type="button"
						{{disabledIfBusy}}>
						{{#if busy service.serviceName}}
							<span class="fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"></span>
							{{mf 'login.OAuth.busy' 'Logging in with '}}
						{{else}}
							<span class="fa fa-{{service.key}} fa-fw" aria-hidden="true"></span>
							{{mf 'login.OAuth.loginWith' 'Login with '}}
						{{/if}}
						{{service.name}}
					</button>
				{{/each}}
			</div>
			<hr>
			<div class="form-group">
				<button
						class="btn btn-add form-control js-register-open"
						type="button">
					<span class="fa fa-plus fa-fw" aria-hidden="true"></span>
					{{mf 'login.register.submit' 'Create account'}}
				</button>
			</div>
		</div>
	</form>
</template>

<template name="registerFrame">
	<form>
		<div class="form-group">
			<div class="input-group">
				<span class="input-group-addon">
					<span class="fa fa-user fa-fw" aria-hidden="true"></span>
				</span>
				<input class="form-control"
				       id="registerName"
				       type="text"
				       placeholder={{mf 'frame.login.username' 'Username'}}
				/>
			</div>
		</div>
		<div class="form-group">
			<div class="input-group">
				<span class="input-group-addon">
					<span class="fa fa-lock fa-fw" aria-hidden="true"></span>
				</span>
				<input class="form-control"
				       id="registerPassword"
				       placeholder="{{mf '_inputField.password'}}"
				       type="password"
				/>
			</div>
		</div>
		<div class="form-group">
			<div class="input-group">
				<span class="input-group-addon">
					<span class="fa fa-envelope fa-fw" aria-hidden="true"></span>
				</span>
				<input class="form-control"
				       id="registerEmail"
				       placeholder="{{mf 'frame.login.email' 'E-Mail'}} {{mf '_inputField.optional'}}"
				       type="email"
				/>
			</div>
			<span class="help-block register-mail-disclaimer">
				<!-- <span class="fa fa-info-circle fa-fw" aria-hidden="true"></span> -->
				{{#mf KEY='login.frame.register.mailDisclaimer'}}
					Providing an e-mail address allows other users to contact you
					and is needed to recover your password in case you forget it.
				{{/mf}}
			</span>
		</div>
		<div class="form-group">
			<button type="submit" class="btn btn-add form-control js-register" {{disabledIfBusy}}>
				{{#if busy 'registering'}}
					<span class="fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"></span>
					{{mf 'login.register.submit.busy' 'Registering...'}}
				{{else}}
					<span class="fa fa-plus fa-fw" aria-hidden="true"></span>
					{{mf 'login.register.submit'}}
				{{/if}}
			</button>
		</div>
		<hr>
		<div class="form-group">
			<button
				id="backToLogin"
				class="btn btn-default form-control"
				type="button">
				<i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>
				{{mf 'login.register.backToLogin' 'Go back to login'}}
			</button>
		</div>
	</form>
</template>

<template name="forgotPwdFrame">
	<form class="js-reset-pw">
	<div class="forgot_login">
		<p>
			{{mf 'forgot.explanation'
			"We can send you a mail that allows you to reset your password. This is only possible if you've provided us with a mail address"}}
		</p>
		<div class="form-group">
			<div class="input-group">
				<span class="input-group-addon">
					<span class="fa fa-envelope"></span>
				</span>
				<input class="form-control js-reset-pw-email"
				       aria-describedby="forgotPwdMailHelp"
				       placeholder="{{mf 'frame.login.email' 'E-Mail'}}"
				       type="email"
				/>
			</div>
			{{#if noValidEmail}}
				<span id="forgotPwdMailHelp" class="help-block">
					{{mf 'forgot.notValid' "Please enter the address you signed up with."}}
				</span>
			{{/if}}
		</div>
		<div class="form-group">
			<button
				class="btn btn-save js-reset-pwd-btn form-control"
			    disabled="{{#if noValidEmail}}disabled{{/if}}"
			    type="submit"
				{{disabledIfBusy}}>
				{{#if busy 'requesting-pw-reset'}}
					<span class="fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"></span>
					{{mf 'forgot.send.busy' 'Resetting password...'}}
				{{else}}
					<span class="fa fa-envelope fa-fw" aria-hidden="true"></span>
					{{mf 'forgot.send' 'Reset my password'}}
				{{/if}}
			</button>
		</div>
		<div class="form-group">
			<button type="button" class="btn btn-cancel js-reset-pwd-close-btn form-control">
				<span class="fa fa-remove fa-fw" aria-hidden="true"></span>
				{{mf '_button.cancel'}}
			</button>
		</div>
	</div>
	</form>
</template>
