{% extends "dashboard/base_dash.html" %}
{% block title %}Mon profil — GiniFollow{% endblock %}
{% block dashboard_inner %}
<div class="px-3 px-lg-4 py-4">
    <p class="dash-help mb-4">
        <strong>À quoi sert cette page ?</strong> Votre identité visible par l’équipe, vos moyens de contact et votre photo.
        Ces éléments complètent la <a href="{% url 'dashboard' %}">vue d’ensemble</a> et la progression de votre dossier.
    </p>
    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-3 text-center p-4">
                <h2 class="h6 fw-bold text-start mb-3">Photo</h2>
                <p class="dash-help text-start small mb-3">Une photo nous aide à vous reconnaître ; vous pouvez l’importer ou la récupérer depuis Google si vous vous connectez avec ce compte.</p>
                {% if request.user.photo %}
                <img src="{{ request.user.photo.url }}" alt="" class="rounded-circle mb-3 border" style="width: 140px; height: 140px; object-fit: cover;">
                {% else %}
                <div class="rounded-circle bg-primary bg-opacity-10 text-primary d-inline-flex align-items-center justify-content-center mb-3 border" style="width: 140px; height: 140px; font-size: 3rem;">
                    {{ request.user.username|first|upper }}
                </div>
                {% endif %}
                {% if has_google_account %}
                <form method="post" class="d-grid gap-2">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="sync_google_photo">
                    <button type="submit" class="btn btn-outline-primary btn-sm">Récupérer ma photo Google</button>
                </form>
                <p class="small text-muted mt-2 mb-0">Si la photo ne s’affiche pas après une première connexion Google, utilisez ce bouton ou importez une image ci-contre.</p>
                {% endif %}
            </div>
            <div class="card border-0 shadow-sm rounded-3 mt-4 p-4 small text-muted">
                <h3 class="h6 text-dark fw-bold mb-2">Compte</h3>
                <p class="mb-1"><strong>Email :</strong> {{ request.user.email|default:"—" }}</p>
                <p class="mb-0 small">L’email sert d’identifiant de connexion ; pour le modifier, contactez le support.</p>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-1">Coordonnées & identité</h2>
                    <p class="dash-help mb-4">Renseignez des informations exactes : elles servent aux rappels, aux rendez-vous et aux échanges avec les accompagnateurs.</p>
                    <form method="post" enctype="multipart/form-data" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                        <div class="mb-3">
                            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {% if field.name == "photo" %}
                            <p class="small text-muted mb-1">JPG, PNG ou WebP — max 5 Mo.</p>
                            {% endif %}
                            {{ field }}
                            {% if field.errors %}<div class="text-danger small">{{ field.errors|join:", " }}</div>{% endif %}
                        </div>
                        {% endfor %}
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                        <a href="{% url 'dashboard_parametres' %}" class="btn btn-link">Aller aux paramètres</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}