<!DOCTYPE html>
<html lang="fr" th:replace="~{modele-page :: layout('Modifier votre profile',~{::link} , ~{::#container-main})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="container-main">
    <h1>Mon profil</h1>
    <form th:action="@{/inscription/newUser}" method="post" th:object="${userProfile}">
        <!--<div class="erreur-saisie" th:if="${#fields.hasErrors('*')}" >
            <p th:text="#{index.erreurs}">Message d'erreur</p>
        </div>-->
        <!-- Champ pseudo-->
        <div class="champ-saisie">
            <label for="pseudo">Pseudo: </label>
            <div>
                <input type="text" th:field="*{pseudo}" id="pseudo" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('pseudo')}">
                    <ul>
                        <li th:each="erreur: ${#fields.errors('pseudo')}" th:text="${erreur}"></li>
                    </ul>
                </span>
        </div>
        <!-- Champ prénom-->
        <div class="champ-saisie">
            <label for="prenom">Prénom: </label>
            <div>
                <input type="text" th:field="*{prenom}" id="prenom" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('prenom')}">
                    <ul>
                        <li th:each="erreur: ${#fields.errors('prenom')}" th:text="${erreur}"></li>
                    </ul>
                </span>
        </div>
        <!-- Champ nom-->
        <div class="champ-saisie">
            <label for="nom">Nom: </label>
            <div>
                <input type="text" th:field="*{nom}" id="nom" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('nom')}">
                    <ul>
                        <li th:each="erreur: ${#fields.errors('nom')}" th:text="${erreur}"></li>
                    </ul>
                </span>
        </div>
        <!-- Champ email-->
        <div class="champ-saisie">
            <label for="email">Email: </label>
            <div>
                <input type="email" th:field="*{email}" id="email" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('email')}">
                    <ul>
                        <li th:each="erreur: ${#fields.errors('email')}" th:text="${erreur}"></li>
                    </ul>
                </span>
        </div>
        <!-- Champ téléphone-->
        <div class="champ-saisie">
            <label for="telephone">Téléphone: </label>
            <div>
                <input type="text" th:field="*{telephone}" id="telephone" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('telephone')}">
                    <ul>
                        <li th:each="erreur: ${#fields.errors('telephone')}" th:text="${erreur}"></li>
                    </ul>
                </span>
        </div>
        <!-- Champ Rue-->
        <div class="champ-saisie">
            <label for="rue">Rue: </label>
            <div>
                <input type="text" th:field="*{rue}" id="rue" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('rue')}">
                    <ul>
                        <li th:each="erreur: ${#fields.errors('rue')}" th:text="${erreur}"></li>
                    </ul>
                </span>
        </div>
        <!-- Champ Code postal-->
        <div class="champ-saisie">
            <label for="code_postal">Code postal: </label>
            <div>
                <input type="text" th:field="*{code_postal}" id="code_postal" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('code_postal')}">
                    <ul>
                        <li th:each="erreur: ${#fields.errors('code_postal')}" th:text="${erreur}"></li>
                    </ul>
                </span>
        </div>
        <!-- Champ Ville-->
        <div class="champ-saisie">
            <label for="code_postal">Ville: </label>
            <div>
                <input type="text" th:field="*{ville}" id="ville" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('ville')}">
                    <ul>
                        <li th:each="erreur: ${#fields.errors('ville')}" th:text="${erreur}"></li>
                    </ul>
                </span>
        </div>
        <!-- Champ Mot de passe actuel-->
        <div class="champ-saisie">
            <label for="currentPassword">Mot de passe actuel: </label>
            <div>
                <input type="password" th:field="*{currentPassword}" name="currentPassword"  id="currentPassword" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('currentPassword')}">
                <ul>
                    <li th:each="erreur: ${#fields.errors('currentPassword')}" th:text="${erreur}"></li>
                </ul>
            </span>
        </div>
        <!-- Champ Nouveau mot de passe-->
        <div class="champ-saisie">
            <label for="newPassword">Nouveau mot de passe: </label>
            <div>
                <input type="password" th:field="*{newPassword}" name="newPassword" id="newPassword" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('newPassword')}">
                <ul>
                    <li th:each="erreur: ${#fields.errors('newPassword')}" th:text="${erreur}"></li>
                </ul>
            </span>
        </div>
        <!-- Champ Confirmation du nouveau mot de passe-->
        <div class="champ-saisie">
            <label for="confirmPassword">Confirmation du nouveau mot de passe: </label>
            <div>
                <input type="password" th:field="*{confirmPassword}" id="confirmPassword" />
            </div>
            <span style="color: red;" th:if="${#fields.hasErrors('confirmPassword')}">
                <ul>
                    <li th:each="erreur: ${#fields.errors('confirmPassword')}" th:text="${erreur}"></li>
                </ul>
            </span>
        </div>
        <div>Crédits: <span th:text="${userProfile.credit}"></span></div>
        <!-- Input cacher qui permet de stocker l'id du compte utilisateur à mettre à jour -->
        <input type="hidden" id="userId" name="userId" th:field="*{id}" th:value="${userProfile.id}" />
        <input type="submit" value="Enregistrer"/>
    </form>
    <form th:action="@{/profil/delete}" method="post">
        <button type="submit">Supprimer mon compte</button>
    </form>
</div>
</body>
</html>
