{% extends 'base_auth.html' %}
{%load static%}
{% block content %}
<title>Kila Kolis | 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 relative">
	<div class="col-12 col-md-6 col-lg-6 login-background d-flex justify-content-center align-items-center">		
		<div class="left-login-icon text-center relative">
			<div class="login-img">
				<img src="{% static 'admin/images/casual-life-3d-young-man-holding-blue-smartphone.png' %}">
			</div>	
		</div>
		<div class="icons">
				<img src="{% static 'admin/images/icon-1.png' %}" class="img-fluid icon-1">
				<!-- <img src="{% static 'admin/images/icon-3.png' %}" class="img-fluid icon-2"> -->
				<img src="{% static 'admin/images/icon-5.png' %}" class="img-fluid icon-4">
			</div>
	</div>
	<div class="col-12 col-md-6 col-lg-6">
		<div class="login-form pt-4 pb-3 px-5">
			<div class="trans">
			<div id="google_translate_element"></div>
			</div>
			<div class="icons">
				<img src="{% static 'admin/images/icon-1.png' %}" class="img-fluid icon-3">
				<!-- <img src="{% static 'admin/images/icon-3.png' %}" class="img-fluid icon-2"> -->
			</div>
			<div class="text-center">
				<img src="{% static 'admin/images/kila-kolis-logo.png' %}" class="img-fluid bg-logo">
				<!-- <img src="{% static 'admin/images/bg-logo.png' %}" class="img-fluid">  -->
			</div>
			<h2 class="">Login</h2>
			<p class=" ls-2 pt-3">Please sign-in to your account and start the adventure.</p>
			<form id ="admin-login" action="/" method="post">
				{% csrf_token  %}
				<div class="login-inner">
					<div class="form-group relative">
						<label class="">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="">Password </label>
						<input type="password" id="password" name="password" class="form-control" placeholder="Enter 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 class="pre-icon"><img src="{% static 'admin/images/padlock.svg' %}"></div>
					</div>
					<div class="stay-login d-flex justify-content-end pb-3">
						<!-- <label class="checkbox">
							<input type="checkbox" id="logged" name="logged" value="Logged In" checked>
							<span class="gray">  Keep me logged in</span>
						</label> -->
						<!-- <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%}