{% extends 'auth/layout.html.twig' %}

{% block title %}RISKINESS - Profil{% endblock %}

{% block content %}
    <section class="auth" aria-label="Profil">
        <span class="auth__eyebrow">Compte</span>
        <h1 class="auth__title"><span class="accent">Profil</span></h1>
        <p class="auth__lead">Gère tes informations depuis un seul espace sécurisé.</p>

        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="flash flash--{{ label }}">{{ message }}</div>
            {% endfor %}
        {% endfor %}

        {% if errors is not empty %}
            <div class="flash flash--error">
                {% for error in errors %}
                    <div>{{ error }}</div>
                {% endfor %}
            </div>
        {% endif %}

        <div class="flash" style="margin-top: 18px;">
            <strong>Email :</strong> {{ user.email }}<br>
            <strong>Nom affiché :</strong> {{ user.displayName ?: 'Non défini' }}
        </div>

        <form method="post" style="margin-top: 18px; display: grid; gap: 14px;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('profile') }}">

            <label style="display: grid; gap: 8px;">
                <span style="color: var(--text-secondary); font-size: 0.88rem;">Nom affiché</span>
                <input type="text" name="display_name" value="{{ values.displayName }}" autocomplete="name" style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
            </label>

            <div style="display: grid; gap: 10px; padding: 16px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);">
                <div style="color: var(--text-secondary); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.02em;">Changer le mot de passe</div>
                <label style="display: grid; gap: 8px;">
                    <span style="color: var(--text-secondary); font-size: 0.88rem;">Mot de passe actuel</span>
                    <input type="password" name="current_password" autocomplete="current-password" style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
                </label>
                <label style="display: grid; gap: 8px;">
                    <span style="color: var(--text-secondary); font-size: 0.88rem;">Nouveau mot de passe</span>
                    <input type="password" name="new_password" minlength="8" autocomplete="new-password" style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
                </label>
                <label style="display: grid; gap: 8px;">
                    <span style="color: var(--text-secondary); font-size: 0.88rem;">Confirmation</span>
                    <input type="password" name="password_confirmation" minlength="8" autocomplete="new-password" style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
                </label>
            </div>

            <button type="submit" style="border: 0; border-radius: 18px; padding: 14px 16px; color: #fff; background: var(--brand-gradient); font-weight: 700; box-shadow: 0 12px 28px rgba(245, 36, 94, 0.20); cursor: pointer;">
                Enregistrer les modifications
            </button>

            <div style="display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; color: var(--text-secondary); font-size: 0.88rem;">
                <a href="{{ path('app_logout') }}">Se déconnecter</a>
                <a href="{{ path('app_home') }}">Retour à l’accueil</a>
            </div>
        </form>
    </section>
{% endblock %}