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

{% block title %}{{ translate('Reset Password') }}{% endblock %}

{% block content %}

	<div class="flex flex-col-reverse min-h-screen justify-end {{ authpagestacked ? '' : 'lg:flex-row lg:min-h-0' }}">
		
		<div class="flex-1 flex justify-center items-center {{ authpagestacked ? 'w-full' : 'lg:w-1/2 lg:flex-none lg:min-h-screen' }}" style="background-color: {{ authpagebgcolor|default('#0d9488') }}; color: {{ authpagetextcolor|default('#ffffff') }};">
			<div class="max-w-md content-center">
			
				<form method="POST" action="{{ url_for("auth.reset") }}" autocomplete="off">
				
					<fieldset class="">

						<div class="my-2 {{ errors.password ? ' errors' : '' }}">
							<label for="password">{{ translate('New password') }} <abbr title="{{ translate('required') }}">*</abbr></label>
							<input 
								type="password" 
								id="password"
								name="password" 
								autocomplete="new-password"
								value="{{ old.password|e }}" 
								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="">{{ errors.password|first }}</span>
							{% endif %}
						</div>

						<div class="my-2 {{ errors.passwordrepeat ? ' errors' : '' }}">
							<label for="passwordrepeat">{{ translate('Repeat password') }} <abbr title="{{ translate('required') }}">*</abbr></label>
							<input 
								type="password" 
								id="passwordrepeat"
								name="passwordrepeat" 
								autocomplete="new-password"
								value="{{ old.passwordrepeat|e }}" 
								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.passwordrepeat %}
								<span class="">{{ errors.passwordrepeat|first }}</span>
							{% endif %}
						</div>

						<input type="hidden" name="recovertoken" value="{{recovertoken|e}}">
						<input type="hidden" name="username" value="{{username|e}}">
						
						<div class="personal-mail hidden">
							<label>Personal Mail</label>
							<input type="text" name="personal-honey-mail">
						</div>

						<input 
							type="submit" 
							value="{{ translate('Create new password') }}" 
							style="color: {{ authpagetextcolor|default('#ffffff') }}; border-color: {{ authpagetextcolor|default('#ffffff') }};"
                       		class="block w-full mt-6 px-3 py-3 border-0 font-medium text-xs leading-tight uppercase border-2 pointer auth-btn cursor-pointer focus:outline-none focus:ring-0 transition duration-100 ease-in-out"
						/>

					</fieldset>

				</form>	
			</div>
		</div>
		
		<div class="p-5 border-b border-white content-center flex justify-center items-center auth-right-side {{ authpagestacked ? 'w-full' : 'lg:w-1/2' }}">
			<div class="max-w-md content-center {{ authpagestacked ? 'text-center' : '' }}">
				<h1 class="text-4xl py-5">{{ translate('Forgot your password') }}?</h1>
				<p class="py-1">{{ translate('No problem, you can create a new one here.') }} {{ translate('And you might find the following tips helpful') }}:</p>
				<ul class="list-disc pl-4 py-1">
					<li>{{ translate('Use a strong and individual password for every account.') }}</li>
					<li>{{ translate('Your browser can remember all of your passwords.') }}</li>
					<li>{{ translate('The best option is a separate password manager like keepass and others.') }}</li>
				</ul>
			</div>
		</div>
	
	</div>
{% endblock %}
