{% extends 'base_auth.html' %}
{%load static%}
{% block content %}
<title>Investment Edu | Login</title>
<style>
.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="row login-main-r align-items-center main-shadow w-100 m-auto">
	<div class="col-12 col-md-6 col-lg-6 login-background relative d-flex justify-content-center align-items-center p-0">		
		<!-- <div class="left-login-icon text-center relative">
			<div class="login-img">
				<img src="{% static 'admin/images/theme.jpg' %}">
			</div>			
		</div> -->
	</div>
	<div class="col-12 col-md-6 col-lg-6 p-0">

		<div class="login-form pt-4 pb-3">
		<div class="trans">
			<div id="google_translate_element"></div>
			</div>
			<h2 class="bold">Welcome to Tradeedu</h2>
			<p class="gray ls-2 pt-3">Please sign-in to your account and start the adventure.</p>
			<form id ="admin-login" action="/admin-login" method="post">
				{% csrf_token  %}
				<div class="login-inner">
					<div class="form-group relative">
						<label class="gray">Email Address</label>
						<input type="email" id="email" name="email" class="form-control" placeholder="Email Address">  
						<div class="pre-icon"><img src="{% static 'admin/images/email.svg' %}"></div>
					</div>
					<div class="form-group relative">
						<label class="gray">Password </label>
						<input type="password" id="password" name="password" class="form-control" placeholder="*******"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 class="pre-icon"><img src="{% static 'admin/images/padlock.svg' %}"></div>
					</div>
					<div class="stay-login d-flex justify-content-between pb-3">
						{% comment %} <div class="logged-i">
							<label class="checkbox">
								<input type="checkbox" id="logged" name="logged" value="Logged In">
								<span class="gray">  Keep me logged in</span>
							</label>
						</div>			 {% endcomment %}
						<div class="forgot"><a class="dark bold text-black text-decoration-none" href="admin-forget-password">Forgot Password?</a></div>
					</div>
					<div class="login-btn">
						<button class="dark-btn w-100" type="submit">Login Account</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
</div>
{%endblock%}

{%block js%}
<script>
  const PassBtn = document.querySelector('#passBtn');
PassBtn.addEventListener('click', () => {
    const input = document.querySelector('#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>';
  }

});
</script>

{%endblock%}