{% extends 'base_auth.html' %}
{%load static%}
{% block content %}
<title>Manimaran | Reset Password</title>
<style>
.skiptranslate iframe {
    display: none;
}
.skiptranslate iframe {
    display: none;
}
.skiptranslate span a {
    display: none;
}
select.goog-te-combo {
    margin: 0 !important;
    background: #00405b;
    color: #fff;
    padding: 5px;
    width: max-content;
}
.skiptranslate.goog-te-gadget {
    font-size: 0;
}


.trans {
    text-align: right;
}

</style>
{% if valid %}
<div class="container-fluid">
	<div class="row login-main-r align-items-center reset-pass 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/reset.svg' %}">
		</div>
	</div>
	<div class="col-12 col-md-6 col-lg-6">
		<div class="login-form  pt-5 pb-3 px-5">
			<div class="trans">
				<div id="google_translate_element"></div>
			</div>
			<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-admin/' 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 class="back-login text-center mt-lg-5 mt-3">
						<p><a href="/admin-login" class="text-decoration-none">< Back to login</a></p>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
</div>
{%else%}
<p>Invalid link</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 %}