{% set body_class = 'login-page' %}

{% extends "@elementum/login/base.html.twig" %}

{% set title = 'Réinitialisation du mot de passe | ' ~ site.name %}

{% block form %}
	{% if message is defined and message is not empty %}
		<div class="alert alert-success">
			{{ message | raw }}
		</div>

		<p class="login-link">
			<a href="{{ loginUrl }}" class="link tertiary">
				<i class="ri-arrow-left-line"></i>
				Retour à la connexion
			</a>
		</p>
	{% else %}
		<form name="resetpassform" action="{{ fn('home_url') }}/elementum/resetpassword" method="post">
			<header>
				<h2>Réinitialisation du mot de passe</h2>
				<p>Veuillez saisir votre nouveau mot de passe ci-dessous.</p>
			</header>
			<input type="hidden" name="rp_key" value="{{ rp_key }}">
			<input type="hidden" name="rp_login" value="{{ rp_login }}">

			<div class="input-group">
				<label for="pass1" class="sr-only">Nouveau mot de passe</label>
				<div class="field">
					<span class="icon-start">
						<i class="ri-lock-line"></i>
					</span>
					<input type="password" id="pass1" name="pass1" placeholder="Votre nouveau mot de passe" autocomplete="new-password" required>
					<button type="button" class="icon-end show-password">
						<i class="ri-eye-line"></i>
					</button>
				</div>
			</div>
			<div class="input-group">
				<label for="pass2" class="sr-only">Confirmer le nouveau mot de passe</label>
				<div class="field">
					<span class="icon-start">
						<i class="ri-lock-line"></i>
					</span>
					<input type="password" id="pass2" name="pass2" placeholder="Confirmer le nouveau mot de passe" autocomplete="new-password" required>
					<button type="button" class="icon-end show-password">
						<i class="ri-eye-line"></i>
					</button>
				</div>
			</div>

			<div class="btn-container">
				<button type="submit" name="wp-submit" class="button button-primary button-large">
					<i class="dashicons dashicons-update"></i>
					Réinitialiser le mot de passe
				</button>
			</div>

			{% if errors is defined and errors is not empty %}
				<div class="alert alert-danger">
					<h3>Erreur</h3>
					{{ errors | raw }}
				</div>
			{% endif %}


			<p class="login-link">
				<a href="{{ loginUrl }}" class="link tertiary">
					<i class="dashicons dashicons-arrow-left-alt2"></i>
					Retour à la connexion
				</a>
			</p>
		</form>
	{% endif %}
{% endblock %}