<!DOCTYPE html>

<%
	// CREATE ALIASES
	const language = locals?.metadata?.page?.language
    const token = locals?.token
%>

<head>

<%- include ('partials/head.ejs') %>

</head>


<body>

<%- include ('partials/translations.ejs') %>
<%- include ('partials/menu-languages.ejs') %>

<div class='screen <% if (locals.errormessage) { %>error<% } else { %>blue<% } %>'>
	<div class='modal login-module'>
		<form action='/reset-password' method='POST'>
			<input type='hidden' name='originalUrl' value='<%- locals.originalUrl %>'>
            <input type="hidden" name="token" value="<%- token %>">

			<ul>
                <li>
                    <p class='' style="color: #005687; font-weight: bold;">Reset password</p>
                </li>

				<% if (locals.errormessage) { %>
					<li>
						<p class='errormessage'><%- locals.errormessage %></p>
					</li>
				<% } %>

				<li>
					<div class='required'>
						<label class='active'>*</label>
					</div>
					<div class='input-group'>
						<input type='password' id='password' name='password' required>
						<label for='password'>Password</label>
						<!-- TO DO: TRANSLATE -->
					</div>
				</li>

                <li>
					<div class='required'>
						<label class='active'>*</label>
					</div>
					<div class='input-group'>
						<input type='password' id='confirmPassword' name='confirmPassword' required>
						<label for='confirmPassword'>Confirm password</label>
						<!-- TO DO: TRANSLATE -->
					</div>
				</li>

				<li>
					<!-- TO DO: TRANSLATE -->
					<button type='submit'> Reset password </button>
				</li>
			</ul>
		</form>


		<div class="ul-link">
			<hr/>
			<!-- TO DO: TRANSLATE -->
			<p> Already a registed user? <a href="/login"> Log in </a></p>
		</div>

	</div>
</div>

<div class='main-content'>
<header>
	<div class='inner'>
		<%- include ('partials/menu-logo.ejs') %>
	</div>
</header>
<div class='browse'></div>
<div class='sidebar lg'></div>
</div>

<footer></footer>


<script type='text/javascript'>
	document.addEventListener('DOMContentLoaded', evt => {
		// GENERIC BLUR FUNCTION
		const inputs = d3.selectAll('input[type=text], input[type=password]')
		inputs.on('blur.fixlabel', function () {
			fixLabel(this)
		})
		inputs.each(function () { fixLabel(this) })
	})
</script>
</main>

</body>
</html>
