{% extends 'base_auth.html' %}
{% load static%}
{% block content %}
<title>Manimaran | Forgot 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>
<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 forgt-bg relative d-flex justify-content-center align-items-center">
		<div class="login-img relative">
			<img src="{% static 'admin/images/reset.png' %}">
		</div>
	</div>
	<div class="col-12 col-md-6 col-lg-6">
		<div class="login-form pt-5 pb-3 px-5 mx-lg-4">
			<div class="trans">
				<div id="google_translate_element"></div>
			</div>
			<h2 class="bold">Forgot Password?</h2>
			<p class="gray ls-2 py-3">Enter your email and we'll send you instructions to reset your password</p>
			<form class="loginform" action='admin-forget-password' id="admin-forget-password" method="POST">
				{%csrf_token%}
				<div class="login-inner">
					<div class="form-group relative">
						<label class="gray">Email Address</label>
						<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">  
						<div class="pre-icon"><img src="{% static 'admin/images/email.svg' %}"></div>
					</div>
					<div class="login-btn pt-3">
						<button class="dark-btn w-100" type="submit">Send Reset Link</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>
			<!-- Modal Start-->
			<div class="modal fade reset-modal" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
			  <div class="modal-dialog modal-dialog-centered">
			    <div class="modal-content">
			      <div class="modal-body text-center">
			       		<img src="/static/admin/images/email.svg" />
			       		<h4>Check your Email</h4>
			       		<p>We have sent a link to your email to reset your password.Please check your email.</p>
			       		<button class="dark-btn w-100 mt-4" type="submit" data-bs-toggle="modal" data-bs-target="#staticBackdrop" onclick="location.href='/admin-login'">okay</button>
			      </div>
			    </div>
			  </div>
			</div>
			<!-- Modal End-->
		</div>
	</div>
</div>
</div>
{% endblock %}

{%block js%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        {% if messages %}
            {% for message in messages %}
                {% if message.tags == 'success' %}
                    $('#staticBackdrop').modal('show');
                {% endif %}
            {% endfor %}
        {% endif %}
    });
</script>
<!-- end of js -->
{% endblock %}