<template name="resetPassword">
	<div class="container-sm">
		<h1>{{mf 'resetPassword.title' "Reset your password"}}</h1>
		<form class="reset-password">
			<div class="form-group">
				<div class="btn-group">
					<button type="button" class="btn btn-default js-hide-pwd {{#unless showPassword}}active{{/unless}}">
						<span class="fa fa-user-secret"></span>
						{{mf 'resetPassword.confirmPasswordByTyping' "Confirm by typing it again"}}
					</button>
					<button type="button" class="btn btn-default js-show-pwd {{#if showPassword}}active{{/if}}">
						<span class="fa fa-thumbs-up"></span>
						{{mf 'resetPassword.confirmPasswordVisually' "Show what I typed"}}
					</button>
				</div>
			</div>
			<fieldset class="form-group">
				<label for="pass">{{mf '_inputField.password'}}</label>
				<input class="form-control js-pwd-reset"
					id="pass"
					placeholder="{{mf 'profile.input.newPassword'}}"
					type="{{passwordFieldType}}">
			</fieldset>
			{{#unless showPassword}}
				<fieldset class="form-group">
					<label for="passConfirm">{{mf 'passwordReset.label.confirm' "Confirm"}}</label>
					<input class="form-control js-confirm-pwd-reset"
						id="passConfirm"
						placeholder="{{mf 'profile.input.repeatPassword'}}"
						type="{{passwordFieldType}}">
					{{#if passwordSame}}
						{{mf 'resetPassword.message.passwordsSame' "Passwords match"}}
					{{/if}}
					{{#if passwordNotSame}}
						{{mf 'resetPassword.message.passwordsNotSame' "Passwords don't match"}}
					{{/if}}
				</fieldset>
			{{/unless}}
			<div class="form-actions">
				<button type="submit" class="btn btn-save js-reset-pwd" {{submitDisabled}} {{disabledIfBusy}}>
					<span class="fa fa-child"></span>
					{{mf 'resetPassword.confirm' "Set my password"}}
				</button>
				{{> buttonCancel event="js-cancel-reset-pwd"}}
			</div>
		</form>
	</div>
</template>
