{% extends 'layouts/layoutAuth.twig' %}

{% block title %}Login{% endblock %}

{% block content %}

	<div class="flex justify-end">
		
		<div class="bg-teal-600 text-white min-h-screen w-1/2 flex justify-center items-center">
			<div class="max-w-md content-center">

				<h1 class="text-6xl py-5">Login</h1>
			
				<form method="POST" action="{{ url_for("auth.login") }}" autocomplete="off">
				
					<fieldset class="">

						<div class="my-2 {{ errors.username ? ' errors' : '' }}">
							<label for="username">{{ 'Username'|translate }} <abbr title="{{ 'required'|translate }}">*</abbr></label>
							<input 
								type="text" 
								name="username" 
								value="{{ old.username }}" 
								class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
							required>
							{% if errors.signup_username %}
								<span class="">{{ errors.username|first }}</span>
							{% endif %}
						</div>
						
						<div class="my-2 {{ errors.password ? ' errors' : '' }}">
							<label for="password">{{ 'Password'|translate }} <abbr title="{{ 'required'|translate }}">*</abbr></label>
							<input 
								type="password" 
								name="password" 
								autoomplete="off"
								class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
							required>
							{% if errors.password %}
								<span class="error">{{ errors.password|first }}</span>
							{% endif %}
						</div>

						<div class="personal-mail hidden">
							<label>Personal Mail</label>
							<input type="text" name="personal-honey-mail">
						</div>

						<input 
							type="submit" 
							value="{{ 'Login'|translate }}" 
                      		class="block w-full mt-6 px-3 py-3 border-0 font-medium text-xs leading-tight uppercase bg-white text-rose-600 pointer hover:bg-gray-200 cursor-pointer focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
						/>

					</fieldset>

					<div id="loginarea" class="hidden"> csrf() | raw </div>

					{% if settings.recoverpw %}
						
					
					{% else %}

						<div class=""></div>
					
					{% endif %}

				</form>	
			</div>
		</div>
		
		<div class="content-center w-1/2 flex justify-center items-center">
			<div class="max-w-md content-center">
				<h2>Latest from Typemill</h2>
				<p>Hey, get the latest news from Typemill please!</p>
				<p>base_url(): {{ base_url() }}</p>
				<p>current_url(): {{ current_url() }}</p>
				<p>current_path(): {{ current_path() }}</p>
			</div>
		</div>
	
	</div>
{% endblock %}