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

{% block title %}{{ translate('Setup') }}{% endblock %}

{% block content %}

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

				<h1 class="text-4xl py-5">{{ translate('Setup') }}</h1>
			
				<form method="POST" action="{{ url_for("setup.create") }}" autocomplete="off">
				
					<fieldset>

						<div class="my-2 {{ errors.username ? ' errors' : '' }}">
							<label for="username">{{ translate('Username') }} <abbr title="{{ translate('required') }}">*</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.username %}
								<span class="text-rose-300">{{ errors.username|first }}</span>
							{% endif %}
						</div>

						<div class="my-2 {{ errors.email ? ' errors' : '' }}">
							<label for="email">{{ translate('E-Mail') }} <abbr title="{{ translate('required') }}">*</abbr></label>
							<input 
								type="text" 
								name="email" 
								value="{{ old.email }}" 
								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.email %}
								<span class="text-rose-300">{{ errors.email|first }}</span>
							{% endif %}
						</div>
						
						<div class="my-2 {{ errors.password ? ' errors' : '' }}">
							<label for="password">{{ translate('Password') }} <abbr title="{{ translate('required') }}">*</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="text-rose-300">{{ 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="{{ translate('Setup') }}" 
                      		class="block w-full mt-6 px-3 py-3 border-0 font-medium text-xs leading-tight uppercase border-2 border-stone-50 text-stone-50 pointer hover:bg-stone-50 hover:text-stone-800 cursor-pointer focus:outline-none focus:ring-0 transition duration-100 ease-in-out"
						/>

					</fieldset>

				</form>	
			</div>
		</div>
		
		<div class="lg:w-1/2 lg:bg-white lg:text-black p-5 bg-teal-600 text-white border-b border-white content-center flex justify-center items-center">
			<div class="max-w-md content-center">
				{% if systemerrors %}
					<h2 class="text-4xl py-5">{{ translate('Systemcheck') }}</h2>
					<p>{{ translate('The following requirements for the installation are missing') }}:</p>
					<ul style="color:red;padding: 0 14px">
						{% for systemerror in systemerrors %}
							<li style="margin: 5px 0">{{ systemerror }}</li>
						{% endfor %}
					</ul>
				{% else %}
					<h2 class="text-4xl py-5">{{ translate('Welcome to Typemill') }}</h2>
					<p>{{ translate('Hey writer, author, editor, content-guru, or website-manager.') }} {{ translate(' We hope you like Typemill, because we coded it just for you.') }}</p>
					<p>{{ translate('Get inspired and enjoy your writing') }}!</p>
				{% endif %}
			</div>
		</div>
	
	</div>
{% endblock %}