{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input %}
<style>
body, .container {
	background-color: #fff;
}
.top-menu, .footer {
	display: none !important;
}
.container {
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}
#enter {
	width: 220px !important;
	padding: 10px !important;
	background-color: #ededee !important;
	font-weight: bold !important;
}
#main_div {
	margin-top: 10%;
	background-color: #239dee;
}
@supports (-moz-osx-font-smoothing: auto) {
	#main_div {
		background-color: #239dee;
	}
}
.fontuser {
	position: relative;
}
.fontuser i {
	position: absolute;
	left: 9px;
	top: 10px;
	color: #036bb0;
}
.fontpassword {
	position: relative;
	margin-bottom: 15px;
}
.fontpassword i {
	position: absolute;
	left: 9px;
	top: 10px;
	color: #036bb0;
}
.fontpassword span i {
	position: absolute;
	left: 193px;
    top: 10px;
    color: #036bb0;
    font-size: 17px;
	cursor: pointer;
}
</style>
<div id="main_div">
	<div id="login-form" style="padding-top: 40px; padding-bottom: 50px; height: 250px; color: #000;">
		<span id="logo_span">
			<img src="{{ url_for('static', filename='images/logo_login.png')}}">
		</span>
		<form class="form-horizontal" id="auth" method="post" style="margin-top: 60px;left: 0;float: left;margin-left: 93px;">
			<div class="fontuser">
				{{ input('login', class='form-login', placeholder=lang.words.login|title(), required='required', autofocus='autofocus') }}
				<i class="fa fa-user fa-lg"></i>
			</div>
			<br>
			<div class="fontpassword">
				{{ input('pass', type='password', class='form-login', placeholder=lang.words.password|title(), required='required') }}
				{{ input('ref', type='hidden', value=ref) }}
				<i class="fa fa-key fa-lg"></i>
				<span onclick="showPassword('pass')" title="{{lang.words.show|title()}} {{lang.words.password}}">
				<i class="far fa-eye"></i>
					</span>
			</div>
			<button type="submit" name="Login" value="Enter" id="enter">{{lang.words.login2|title()}}</button>
		</form>
		{% if error_log or error %}
		<div class="alert alert-danger wrong-login alert-one-row" style="display: block">
			{{error_log}}
			{{error}}
		</div>
		{% endif %}
		<div class="alert alert-danger wrong-login alert-one-row" id="wrong-login">
			{{lang.phrases.login_or_pass_incorrect}}
			<br />
			<span id="ban_10">
				{{lang.phrases.can_try_again}} <span id="ban_timer">10</span> {{lang.words.seconds2}}
			</span>
		</div>
		<br /><br />
	</div>
</div>
{% endblock %}
