{% extends 'base_auth.html' %}
{%load static%}
{% block content %}
<title>User|Reset Password</title>
{% if valid %}
<div class="container-fluid">
	<div class="row login-main-r align-items-center main-shadow">
	<div class="col-12 col-md-6 col-lg-6 login-background relative d-flex justify-content-center align-items-center">
		<div class="login-img relative">
			<img src="{% static 'admin/images/loginBg.svg' %}">
		</div>
	</div>
	<div class="col-12 col-md-6 col-lg-6">
		<div class="login-form pt-5 pb-3 px-5">
			<h2 class="bold">Reset Your Password</h2>
			<p class="gray ls-2 py-1">Create a secure password below, entering it twice for confirmation.</p>
			<form class="loginform" action='forgot/' id="verify-forgot" method="POST">
				{%csrf_token%}
				<div class="login-inner">
					<div class="form-group position-relative">
						<label class="gray">New Password</label>
						<input type="password" class="form-control" id="new_password" name="new_password" placeholder="New Password" aria-required="false">
						<span class="input-group-addon" role="button" id="passBtn">
						<i class="fa-solid fa-eye pw-aye" aria-hidden="true"></i>
						</span>						
					</div>
					<div class="form-group position-relative">
						<label class="gray">Confirm Password</label>
						<input type="password" class="form-control" id="confirm_new_password" name="confirm_new_password" placeholder="Confirm Password" aria-required="false">
						<span class="input-group-addon" role="button" id="passBtn2">
						<i class="fa-solid fa-eye pw-aye" aria-hidden="true"></i>
						</span>	
					</div>                          	
					<div class="login-btn pt-3">
						<button class="dark-btn w-100" type="submit">Save</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
</div>
{%else%}
<p>Link Expire</p>
{%endif%}
{% endblock %}
{%block js%}
<script>
  const PassBtn = document.querySelector('#passBtn');
PassBtn.addEventListener('click', () => {
    const input = document.querySelector('#new_password');
    input.getAttribute('type') === 'password' ? input.setAttribute('type', 'text') : input.setAttribute('type', 'password');

   if (input.getAttribute('type') === 'text'){
     PassBtn.innerHTML = '<i class="fa-solid fa-eye-slash pw-aye"></i>';
  } else{
     PassBtn.innerHTML = '<i class="fa-solid fa-eye pw-aye" aria-hidden="true"></i>';
  }

});

const PassBtn2 = document.querySelector('#passBtn2');
PassBtn2.addEventListener('click', () => {
    const input = document.querySelector('#confirm_new_password');
    input.getAttribute('type') === 'password' ? input.setAttribute('type', 'text') : input.setAttribute('type', 'password');

   if (input.getAttribute('type') === 'text'){
     PassBtn2.innerHTML = '<i class="fa-solid fa-eye-slash pw-aye"></i>';
  } else{
     PassBtn2.innerHTML = '<i class="fa-solid fa-eye pw-aye" aria-hidden="true"></i>';
  }

});
</script>
{% endblock %}