{% extends 'base.html.twig' %}

{% block title %}Modifier mon mot de passe - E-Ticket{% endblock %}
{% block description %}Modifiez votre mot de passe E-Ticket{% endblock %}

{% block body %}
<div class="page-container-xs">
    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Modifier mon mot de passe</h1>
    <p class="font-bold text-gray-600 italic mb-8">Saisissez votre mot de passe actuel et choisissez-en un nouveau.</p>

    {% for message in app.flashes('success') %}
        <div class="flash-success mb-8"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    {% for message in app.flashes('error') %}
        <div class="flash-error mb-8"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    <form method="post" action="{{ path('app_change_password') }}" class="form-col">
        <div>
            <label for="current_password" class="text-xs font-black uppercase tracking-widest form-label">Mot de passe actuel</label>
            <input type="password" id="current_password" name="current_password" required autofocus
                class="form-input focus:border-indigo-600"
                placeholder="••••••••">
        </div>

        <div>
            <label for="new_password" class="text-xs font-black uppercase tracking-widest form-label">Nouveau mot de passe</label>
            <input type="password" id="new_password" name="new_password" required minlength="8"
                class="form-input focus:border-indigo-600"
                placeholder="••••••••">
        </div>

        <div>
            <label for="confirm_password" class="text-xs font-black uppercase tracking-widest form-label">Confirmer le nouveau mot de passe</label>
            <input type="password" id="confirm_password" name="confirm_password" required minlength="8"
                class="form-input focus:border-indigo-600"
                placeholder="••••••••">
        </div>

        <input type="hidden" name="_csrf_token" value="{{ csrf_token('change_password') }}">

        <div>
            <button type="submit" class="btn-brutal-full bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                Modifier le mot de passe
            </button>
        </div>
    </form>

    <div class="mt-8 text-center">
        <p class="text-sm font-bold text-gray-600"><a href="{{ path('app_account') }}" class="text-indigo-600 hover:underline font-black">Retour a mon compte</a></p>
    </div>
</div>
{% endblock %}
