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

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

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

{% block body %}
    <div class="row g-5 mb-5">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Mes informations</h3></div>
                </div>
                <div class="card-body pt-0">
                    <form method="post" action="{{ path('mon_profil_informations') }}" class="row g-3">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('mon_profil_informations') }}">
                        <div class="col-md-4">
                            <label class="form-label">Civilité</label>
                            <select name="civilite" class="form-select">
                                <option value=""></option>
                                {% for civilite in civilites %}
                                    <option value="{{ civilite.value }}" {{ app.user.civilite == civilite ? 'selected' : '' }}>{{ civilite.label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Prénom *</label>
                            <input type="text" name="prenom" value="{{ app.user.prenom }}" required class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Nom *</label>
                            <input type="text" name="nom" value="{{ app.user.nom }}" required class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Email</label>
                            <input type="text" value="{{ app.user.email }}" disabled class="form-control">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Avatar</h3></div>
                </div>
                <div class="card-body pt-0">
                    <div class="d-flex align-items-center gap-5 mb-5">
                        <div class="symbol symbol-75px">
                            {% if avatarUrl %}
                                <img src="{{ avatarUrl }}" alt="Avatar" class="rounded-circle">
                            {% else %}
                                <div class="symbol-label bg-light-primary text-primary fw-bold fs-2">
                                    {{ app.user.prenom|slice(0, 1) }}{{ app.user.nom|slice(0, 1) }}
                                </div>
                            {% endif %}
                        </div>
                        {% if avatarUrl %}
                            <form method="post" action="{{ path('mon_profil_avatar_supprimer') }}">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('mon_profil_avatar_supprimer') }}">
                                <button type="submit" class="btn btn-light btn-sm">Supprimer l'avatar</button>
                            </form>
                        {% endif %}
                    </div>
                    <form method="post" action="{{ path('mon_profil_avatar') }}" enctype="multipart/form-data" class="row g-3">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('mon_profil_avatar') }}">
                        <div class="col-12">
                            <label class="form-label">Nouvelle image (JPEG ou PNG, 3 Mo max)</label>
                            <input type="file" name="avatar" accept="image/jpeg,image/png" required class="form-control">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">Téléverser</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Mot de passe</h3></div>
        </div>
        <div class="card-body pt-0">
            <form method="post" action="{{ path('mon_profil_mot_de_passe') }}" class="row g-3">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('mon_profil_mot_de_passe') }}">
                <div class="col-md-4">
                    <label class="form-label">Mot de passe actuel *</label>
                    <input type="password" name="ancien_mot_de_passe" required class="form-control" autocomplete="current-password">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Nouveau mot de passe *</label>
                    <input type="password" name="nouveau_mot_de_passe" required minlength="8" class="form-control" autocomplete="new-password">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Confirmation *</label>
                    <input type="password" name="confirmation" required minlength="8" class="form-control" autocomplete="new-password">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Modifier le mot de passe</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}