{% extends 'layout.html' %}
{% block content %}
    <section class="profile-section">
        {% include "../partials/_profile_nav.html" %}

        <div class="profile-content">
            <div class="profile-grid">
                <div class="profile-card">
                    <h3>Modifier mon profil public</h3>
                    <div style="display:flex; align-items:center; gap:16px; margin: 10px 0 14px;">
                        <img src="/{{ user.profile.avatar }}" alt="Avatar actuel" class="profile-avatar" style="width:72px;height:72px;margin-top:0;">
                        <div>
                            <div class="muted">Aperçu de l’avatar actuel</div>
                            <small class="muted">Vous pouvez téléverser une nouvelle image ci‑dessous.</small>
                        </div>
                    </div>

                    <form method="post" enctype="multipart/form-data" class="form">
                        {% csrf_token %}
                        {{ profile_form.as_p }}
                        <div class="form-actions">
                            <a href="{% url 'profile' %}" class="btn btn-secondary">Annuler</a>
                            <button type="submit" class="btn btn-primary">Enregistrer</button>
                        </div>
                    </form>
                </div>

                <div class="profile-card">
                    <h3>Conseils</h3>
                    <ul class="profile-about-list">
                        <li>Utilisez votre vrai nom pour être plus facilement reconnu.</li>
                        <li>Une bio claire aide la communauté à mieux vous connaître.</li>
                        <li>Privilégiez une photo carrée pour un meilleur rendu.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
{% endblock %}