{% extends 'layouts/base-fullscreen.html' %}

{% block title %} Password Reset {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}



{% block content %}

<!-- Page content -->
<div class="container mt--8 pb-5">
	<div class="row justify-content-center">
		<div class="col-lg-5 col-md-7">
			<div class="card bg-secondary shadow border-0">
				<div class="card-header bg-transparent pb-5">
					<div class="text-muted text-center mt-2 mb-3">
						<h1>Password Reset</h1>
						{% with messages = get_flashed_messages(with_categories=true) %}
						{% if messages %}
						{% for category, message in messages %}
						<div class="alert alert-{{ category }}">
							{{ message }}
						</div>
						{% endfor %}
						{% endif %}
						{% endwith %}
					</div>
				</div>
				<div class="card-body px-lg-5 py-lg-5">
					<form role="form" method="post" action="" onsubmit="return validateLoginForm()">
						{{ form.hidden_tag() }}
						<div class="form-group">
							<div class="input-group input-group-alternative">
								<div class="input-group-prepend">
									<span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
								</div>
								{{ form.password(placeholder="Password",class="form-control",type="password",size=30) }}
							</div>
							<div id="password-error" class="text-danger"></div>
						</div>
						<div class="form-group">
							<div class="input-group input-group-alternative">
								<div class="input-group-prepend">
									<span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
								</div>
								{{ form.confirm_password(placeholder="Confirm Password", class="form-control", type="password", size=30) }}
							</div>
							<div id="confirm-password-error" class="text-danger"></div>
						</div>
						<div class="text-center">
							<button type="submit" name="reset_password" class="btn btn-primary my-4">Reset Password</button>
						</div>
					</form>
				</div>
			</div>

		</div>
	</div>
</div>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}

<script>
	function validateLoginForm() {
		var password = document.getElementById('password').value;
		console.log(password)
		console.log("The above is the password")

		var valid = true;

		// Validate password
		if (password.length < 8) {
			document.getElementById('password-error').innerHTML = 'Password should be at least 8 characters long';
			valid = false;
		} else {
			document.getElementById('password-error').innerHTML = '';
		}

		var confirm_password = document.getElementById('confirm_password').value;
		if (confirm_password != password) {
			document.getElementById('confirm-password-error').innerHTML = 'Passwords do not match';
			valid = false;
		} else {
			document.getElementById('confirm-password-error').innerHTML = '';
		}

		return valid;
	}
</script>

{% endblock javascripts %}