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

{% block pp %}{{pp}}{% endblock %}

{% block css %}{{css}}{% endblock %}

{% block title %}Paramètres - HearthTrack{% endblock %}

{% block user %}{{user}} - {{role}}{% endblock %}

{% block body %}
<div class="container-fluid px-4">
                        <h1 class="mt-4">Paramètres</h1>
                        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="/home">Accueil</a></li>
            <li class="breadcrumb-item active">Paramètres</li>
        </ol>
                        <div class="row">
                            <div class="col-3">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-area me-1"></i>
                                        Profile
                                    </div>
                                    <div class="card-body">
                                        <div>
                                            <style> .image-ronde{ clip-path:ellipse(50% 50%);} </style>
                                            <img src="/assets/img/person/{{infoUser.img}}.png" width="250px" height="250px" class="image-ronde" style="
                                                margin-left: 13px;
                                            ">
                                        </div>
                                        <div style="text-align:center; margin-top: 15px;">
                                            Nom : {{infoUser.nom}}
                                        </div>
                                        <div style="text-align:center">
                                            Prénom : {{infoUser.prenom}}
                                        </div>
                                        <div style="text-align:center">
                                            Date de naissance : {{infoUser.dateNaiss}}
                                        </div>
                                        <div style="text-align:center">
                                            Email : {{infoUser.favSport}}
                                        </div>
                                        <div style="text-align:center; margin-bottom: 15px;">
                                            Numéro de téléphone : {{infoUser.coach}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-9">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-bar me-1"></i>
                                        Générale
                                    </div>
                                    <div class="card-body">
                                            <form id="preferencesForm" method="post" action="/preferences">
                                            <div>
                                                <label for="notif">Notifications:</label>
                                                <input type="checkbox" id="notif" name="notifications">
                                            </div>
                                            <div>
                                                <label for="theme">Thème:</label>
                                                <select id="theme" name="theme">
                                                    <option value="base_theme">Base</option>
                                                    <option value="dark_theme">Sombre</option>
                                                    <option value="pink_theme">Rose</option>
                                                </select>
                                            </div>
                                                <button type="submit" id="saveButton" class="btn btn-primary">Enregistrer</button>
                                            </form>
                                            <h1></h1>
                                            <form action="/mdp" method="post">
                                            <div>
                                                <label for="ancienMotDePasse">Ancien mot de passe:</label>
                                                <input type="password" id="ancienMotDePasse" name="ancienMotDePasse" required>
</div>
                                            <div>
                                                <label for="nouveauMotDePasse">Nouveau mot de passe:</label>
                                                <input type="password" id="nouveauMotDePasse" name="nouveauMotDePasse" required>
</div>
                                            <div>
                                                <label for="confirmerMotDePasse">Confirmer le nouveau mot de passe:</label>
                                                <input type="password" id="confirmerMotDePasse" name="confirmerMotDePasse" required>
</div>
                                            <div>
                                                <button type="submit" class="btn btn-primary">Enregistrer</button>
                                            </div>
                                            </form>
                                            <h1></h1>

                                            <form action="/psettings" method="post">
                                            <div>
                                                <label for="nom">Nom:</label>
                                                <input type="text" id="nom" name="nom" required>
</div>
<div>
                                                <label for="prenom">Prénom:</label>
                                                <input type="text" id="prenom" name="prenom" required>
</div>
<div>
                                                <label for="dateNaissance">Date de naissance:</label>
                                                <input type="date" id="dateNaissance" name="dateNaissance" required>
</div>
<div>
                                                <label for="email">Email:</label>
                                                <input type="email" id="mail" name="mail" required>
</div>
<div>
                                                <label for="numeroTelephone">Numéro de téléphone:</label>
                                                <input type="tel" id="tel" name="tel" required>
</div>
<div>
                                                <button type="submit" class="btn btn-primary">Modifier les informations personnelles</button>
                                                </div>
                                            </form>
                                        </div>

                                </div>
                            </div>
                        </div>
                    </div>
{% endblock %}