<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
		<title>{{i18n 'form.forgotPassword.title'}}</title>
		<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
		<style type="text/css" media="all">
			body {
				{{#if theme.backgroundImage}}
					background-image: url('{{site.root_path}}{{theme.backgroundImage}}');
				{{/if}}
				background-repeat: no-repeat;
				background-size: cover;
				height: 100vh;
				margin: 0;
				padding: 0;
				font-family: 'Roboto', sans-serif;
			}

			.frame {
				max-width: 340px;
				margin: 0 auto;
				padding: 50px 70px 90px;
				background-color: #fff;
				border: 1px solid #dbdbdb;
				box-shadow: 0 0 4px 0 rgba(0,0,0,0.20);
				border-radius: 5px;
				top: calc(50vh - 300px);
				position: relative;
			}

			.header-text h1 {
				color: #4c4c4c;
				font-size: 24px;
				line-height: 28px;
				margin-bottom: 10px;
				font-weight: normal;
			}

			.header-text div {
				color: #4c4c4c;
				font-size: 14px;
				line-height: 20px;
				margin-bottom: 25px;
			}

			.inputfield {
				display: block;
				float: none;
				margin-bottom: 15px;
				padding-left: 0;
				padding-top: 15px;
				position: relative;
				width: initial;
				border-bottom: 1px solid #373737;
			}

			.inputfield.error {
				border-bottom-color: #e8400e;
			}

			.inputfield.password {
				margin-bottom: 25px;
			}

			.inputfield .action-clear {
				bottom: 0;
				cursor: pointer;
				display: none;
				font-size: 16px;
				color: #373737;
				position: absolute;
				padding: 16px 0 14px;
				right: 0;
				text-align: center;
				width: 40px;
			}

			.inputfield label {
				font-size: 16px;
				line-height: 50px;
				position: absolute;
				top: 15px;
				-moz-transition: all 150ms ease-out;
				-o-transition: all 150ms ease-out;
				-webkit-transition: all 150ms ease-out;
				transition: all 150ms ease-out;
				color: #373737;
			}

			.inputfield.has-value label,
			.inputfield.focus label {
				font-size: 12px;
				line-height: 14px;
				top: 0px;
			}

			.inputfield input {
				color: #373737;
				border: none;
				background: none;
				-moz-border-radius: 0;
				-webkit-border-radius: 0;
				border-radius: 0;
				font-size: 16px;
				height: 48px !important;
				height: 50px !important;
				padding: 0;
				width: 100%;
			}

			input[type=submit] {
				background: {{theme.colors.primary-color}};
				border-radius: 3px;
				width: 100%;
				height: 50px;
				border: none;
				color: #fff;
				text-transform: uppercase;
				font-size: 16px;
				margin-top: 45px;
			}

			.error {
				font-size: 14px;
				color: #e8400e;
				line-height: 16px;
			}

			input:-webkit-autofill,
			input:-webkit-autofill:hover,
			input:-webkit-autofill:focus,
			input:-webkit-autofill:active {
				transition: background-color 5000s ease-in-out 0s;
			}

			.buttons a {
				line-height: 50px;
				text-align: center;
				font-size: 15px;
				color: #373737;
				font-weight: bold;
				display: inline-block;
				text-decoration: none;
				text-transform: uppercase;
			}
		</style>
	</head>
	<body>
		<div class="frame">
			<div class="content">
				{{#if theme.logo}}
					<div class="company-logo">
						<img src="{{site.root_path}}{{theme.logo}}" />
					</div>
				{{/if}}
				{{#if message.msgid = 'SPF1000'}}
					<div class="header-text">
						<h1>{{i18n 'form.forgotPassword.success.title'}}</h1>
						<div>{{i18n 'form.forgotPassword.success.subtitle'}}</div>
					</div>
					<div class="buttons">
						<a href="/">{{i18n 'form.forgotPassword.success.frontpageBtn.text'}}</a>
					</div>
				{{else}}
					<div class="header-text">
						<h1>{{i18n 'form.forgotPassword.title'}}</h1>
						<div>{{i18n 'form.forgotPassword.subtitle' this}}</div>
					</div>
					<form action="" method="post">
						<div class="inputfield password">
							<div class="action-clear">
								<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZweCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPgogIDxnPgogICAgPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTI4Ljk0MSwzMS43ODZMMC42MTMsNjAuMTE0Yy0wLjc4NywwLjc4Ny0wLjc4NywyLjA2MiwwLDIuODQ5YzAuMzkzLDAuMzk0LDAuOTA5LDAuNTksMS40MjQsMC41OSAgIGMwLjUxNiwwLDEuMDMxLTAuMTk2LDEuNDI0LTAuNTlsMjguNTQxLTI4LjU0MWwyOC41NDEsMjguNTQxYzAuMzk0LDAuMzk0LDAuOTA5LDAuNTksMS40MjQsMC41OWMwLjUxNSwwLDEuMDMxLTAuMTk2LDEuNDI0LTAuNTkgICBjMC43ODctMC43ODcsMC43ODctMi4wNjIsMC0yLjg0OUwzNS4wNjQsMzEuNzg2TDYzLjQxLDMuNDM4YzAuNzg3LTAuNzg3LDAuNzg3LTIuMDYyLDAtMi44NDljLTAuNzg3LTAuNzg2LTIuMDYyLTAuNzg2LTIuODQ4LDAgICBMMzIuMDAzLDI5LjE1TDMuNDQxLDAuNTljLTAuNzg3LTAuNzg2LTIuMDYxLTAuNzg2LTIuODQ4LDBjLTAuNzg3LDAuNzg3LTAuNzg3LDIuMDYyLDAsMi44NDlMMjguOTQxLDMxLjc4NnoiLz4KICA8L2c+Cjwvc3ZnPgo=" />
							</div>
							<input placeholder="{{i18n 'form.passwordField.label'}}" type="password" class="textfield" maxlength="128" size="128" name="password" id="password" placeholder="">
						</div>
						<div class="inputfield password2 has-value">
							<div class="action-clear">
								<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZweCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPgogIDxnPgogICAgPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTI4Ljk0MSwzMS43ODZMMC42MTMsNjAuMTE0Yy0wLjc4NywwLjc4Ny0wLjc4NywyLjA2MiwwLDIuODQ5YzAuMzkzLDAuMzk0LDAuOTA5LDAuNTksMS40MjQsMC41OSAgIGMwLjUxNiwwLDEuMDMxLTAuMTk2LDEuNDI0LTAuNTlsMjguNTQxLTI4LjU0MWwyOC41NDEsMjguNTQxYzAuMzk0LDAuMzk0LDAuOTA5LDAuNTksMS40MjQsMC41OWMwLjUxNSwwLDEuMDMxLTAuMTk2LDEuNDI0LTAuNTkgICBjMC43ODctMC43ODcsMC43ODctMi4wNjIsMC0yLjg0OUwzNS4wNjQsMzEuNzg2TDYzLjQxLDMuNDM4YzAuNzg3LTAuNzg3LDAuNzg3LTIuMDYyLDAtMi44NDljLTAuNzg3LTAuNzg2LTIuMDYyLTAuNzg2LTIuODQ4LDAgICBMMzIuMDAzLDI5LjE1TDMuNDQxLDAuNTljLTAuNzg3LTAuNzg2LTIuMDYxLTAuNzg2LTIuODQ4LDBjLTAuNzg3LDAuNzg3LTAuNzg3LDIuMDYyLDAsMi44NDlMMjguOTQxLDMxLjc4NnoiLz4KICA8L2c+Cjwvc3ZnPgo=" />
							</div>
							<input placeholder="{{i18n 'form.password2Field.label'}}" type="password" class="textfield" maxlength="128" size="128" name="password2" id="password2" placeholder="">
						</div>
						{{#if message}}
							<div class="error">
								{{i18n message.msgid data message.text}}
							</div>
						{{/if}}
						<input type="submit" value="{{i18n 'form.forgotPassword.submitBtn.value'}}"/>
					</form>
				{{/if}}
			</div>
		</div>
	</body>
</html>
