<!DOCTYPE html>
<%
	// CREATE ALIASES
	const language = locals.metadata.page.language
%>
<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='/login' method='POST'>
			<input type='hidden' name='originalUrl' value='<%- locals.originalUrl %>'>
			<ul>
				<% 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='text' id='username' name='username' required>
						<label for='username'>First and last name, or email</label>
						<!-- TO DO: TRANSLATE -->
					</div>
				</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'><%- vocabulary['password'][language] %></label>
					</div>
				</li>

				<li>
					<div class='alert session-alert pt-5'>
						<input type='checkbox' id='is_trusted' name='is_trusted' >
						<small  for='is_trusted'>Trust this device.</small>
					</div>
				</li>

				<li>
					<button type='submit'><%- vocabulary['log in'][language] %></button>
				</li>
			</ul>
		</form>


		<div class="ul-link">
			<hr/>
			<!-- TO DO: TRANSLATE -->
			<p > Forgot password? <a href="/forget-password"> Reset you password </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>

<script type='text/javascript'>
	d3.select('#global-login a')
		// .attr('href', `http://localhost:4000?origin=${encodeURIComponent(window.location)}&platform=${encodeURIComponent('action plans')}`)
		.attr('href', `https://www.sdg-innovation-commons.org/?origin=${encodeURIComponent(window.location)}`)
</script>
</main>

</body>
</html>
