{% extends 'profile/_layout.html.twig' %}

{% block title %}Mon profil — Skeleton{% endblock %}

{% block page_title %}Mon profil{% endblock %}

{% block profile_body %}

<div class="profile-section">

    {# ── En-tête profil ── #}
    <div class="profile-header-card">
        <div class="profile-header-avatar" data-user-initials>
            {{ app.user.firstName|first|upper }}{{ app.user.lastName|first|upper }}
        </div>
        <div class="profile-header-info">
            <h2 data-user-fullname>{{ app.user.firstName }} {{ app.user.lastName }}</h2>
            <p>{{ app.user.email }}</p>
            <span class="profile-badge {% if app.user.isVerified %}profile-badge--verified{% else %}profile-badge--pending{% endif %}">
                {% if app.user.isVerified %}
                    <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
                    Compte vérifié
                {% else %}
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                    En attente de vérification
                {% endif %}
            </span>
        </div>
        <div class="profile-header-meta">
            <span class="profile-meta-label">Membre depuis</span>
            <span class="profile-meta-value">{{ app.user.createdAt|date('d/m/Y') }}</span>
        </div>
    </div>

    {# ── Formulaire ── #}
    <div class="profile-card">
        <div class="profile-card-header">
            <h3>Informations personnelles</h3>
            <p>Modifiez vos informations de profil</p>
        </div>

        {{ form_start(form, {attr: {
            class: 'profile-form',
            novalidate: 'novalidate',
            'data-original-firstname': original_firstName,
            'data-original-lastname': original_lastName
        }}) }}

            <div class="profile-form-row">
                <div class="profile-field">
                    {{ form_label(form.firstName) }}
                    <div class="profile-input-wrap">
                        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                        {{ form_widget(form.firstName) }}
                    </div>
                    <div data-error="firstName">{{ form_errors(form.firstName) }}</div>
                </div>
                <div class="profile-field">
                    {{ form_label(form.lastName) }}
                    <div class="profile-input-wrap">
                        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                        {{ form_widget(form.lastName) }}
                    </div>
                    <div data-error="lastName">{{ form_errors(form.lastName) }}</div>
                </div>
            </div>

            <div class="profile-field">
                <label class="profile-label">Adresse e-mail</label>
                <div class="profile-input-wrap profile-input-wrap--readonly">
                    <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                    <span class="profile-input-static">{{ app.user.email }}</span>
                    <span class="profile-input-lock">
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    </span>
                </div>
                <p class="profile-field-hint">
                    L'adresse e-mail ne peut pas être modifiée ici — rendez-vous dans
                    <a href="{{ path('app_settings') }}">Paramètres</a>.
                </p>
            </div>

            <div class="profile-form-footer">
                <button type="submit" class="settings-btn" id="profile-save-btn">
                    <svg class="btn-icon-save" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                    <svg class="btn-icon-spin" viewBox="0 0 24 24" style="display:none"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="31.4 31.4" stroke-linecap="round"/></svg>
                    Enregistrer les modifications
                </button>
            </div>

        {{ form_end(form) }}
    </div>

    {# ── Infos compte ── #}
    <div class="profile-card profile-card--info">
        <div class="profile-card-header">
            <h3>Informations du compte</h3>
        </div>
        <div class="profile-info-grid">
            <div class="profile-info-item">
                <span class="profile-info-label">Identifiant unique</span>
                <code class="profile-info-value">{{ app.user.uuid }}</code>
            </div>
            <div class="profile-info-item">
                <span class="profile-info-label">Dernière mise à jour</span>
                <span class="profile-info-value" id="profile-updated-at">
                    {{ app.user.updatedAt ? app.user.updatedAt|date('d/m/Y à H:i') : 'Jamais modifié' }}
                </span>
            </div>
        </div>
    </div>

</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/profile.js') }}"></script>
{% endblock %}