{% extends 'Layouts/login.html.twig' %}

{% block title %}
	{{ 'app.global.user.password.reset.form.title'|trans }}
{% endblock %}

{% block body %}
	{{ form_start(resetForm, {
		'attr': {
			'id': 'kt_modal_' ~ resetForm.vars.id ~ '_form' ,
			'class': 'kt-fx-form mx-auto w-100 py-10','novalidate':'novalidate'}
		}) }}
	<div class="text-center mb-11">
		<a href="{{ path('foxorders_dashboard') }}">
			<img alt="Logo" src="{{asset('foxorders/media/logos/popina-order-icon.png')}}" class="h-100px"/>
		</a>
		<h1 class="text-dark mb-3">{{ 'app.global.user.password.reset.form.title'|trans }}</h1>
		<div class="text-gray-400 fw-bold fs-4">{{ 'app.global.user.password.already_have_account'|trans }}
			<a href="{{path('security_login')}}" class="link-primary fw-bolder">{{ 'app.global.user.password.reset.button.connect_here'|trans }}</a>
		</div>
	</div>
	<div class="row g-3 mb-9">
		<div class="col-md-12">
			{% for flashError in app.flashes('verify_email_error') %}
				<div class="alert alert-danger" role="alert" align="center">{{ flashError }}</div>
			{% endfor %}
		</div>
	</div>
	<div class="fv-row mb-8">
		<div class="mb-10 fv-row" data-kt-password-meter="true" data-kt-password-meter-min-length="16">
			<div class="mb-1">
				<div class="position-relative mb-3">
					{{ resetForm.plainPassword.first|form_row('app.global.user.form.password.first'|trans, {'class': 'form-control form-control-lg form-control-solid', 'label': false}) }}
					<span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
						<i class="bi bi-eye-slash fs-2"></i>
						<i class="bi bi-eye fs-2 d-none"></i>
					</span>
				</div>

				<div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
					<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
					<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
					<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
					<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
				</div>
			</div>
			<div class="text-muted">{{ 'app.global.user.password.reset.notice'|trans }}</div>
		</div>
		<div class="fv-row mb-10">
			{{ resetForm.plainPassword.second|form_row('app.global.user.form.password.second'|trans, {'class': 'form-control form-control-lg form-control-solid', 'label': false}) }}
		</div>
	</div>
	<div class="d-grid mb-10">
		{% include 'Includes/Form/submit.html.twig' %}
	</div>
	{{ form_end(resetForm) }}
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>
		var translations = {
			'empty': '{{ 'app.global.validation.user.password.empty' | trans }}',
			'regex': '{{ 'app.global.validation.user.password.format' | trans }}',
			'notidentical': '{{ 'app.global.validation.user.password.notidentical' | trans }}'
		}
	</script>
	<script src="{{ asset('foxorders/js/validation/rules/security/reset-password.js') }}"></script>
{% endblock %}