{% 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="/">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">
                                            Sport favori : {{infoUser.favSport}}
                                        </div>
                                        <div style="text-align:center; margin-bottom: 15px;">
                                            Coach : {{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>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
{% endblock %}