<!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">
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/fontawesome/css/all.css">
</head>
<body>
<div id="container-main" class="container mt-5">
    <h1 th:text="#{edit.profil.title}"></h1>
    <form th:action="@{/inscription/newUser}" method="post" th:object="${userProfile}" class="needs-validation" novalidate>
        <div class="card">
            <div class="card-body">
                <!-- Iteration over form fields -->
                <div class="mb-3">
                    <li class="list-group-item">
                        <strong><label class="col-form-label" th:text="#{profil.pseudo}"></label></strong>
                        <span th:text="${userProfile.pseudo}"></span>
                    </li>
                </div>
                <div class="mb-3">
                    <label for="prenom" class="form-label" th:text="#{profil.surname}">:</label>
                    <input type="text" class="form-control" th:field="*{prenom}" id="prenom" required>
                    <div th="if=${#fields.hasErrors('prenom')}" class="invalid-feedback">
                        <ul>
                            <li th:each="err : ${#fields.errors('prenom')}" th:text="${err}"></li>
                        </ul>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="nom" class="form-label" th:text="#{profil.name}"></label>
                    <input type="text" class="form-control" th:field="*{nom}" id="nom" required>
                    <div th="if=${#fields.hasErrors('nom')}" class="invalid-feedback">
                        <ul>
                            <li th:each="err : ${#fields.errors('nom')}" th:text="${err}"></li>
                        </ul>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="email" class="form-label" th:text="#{profil.email}" ></label>
                    <input type="email" class="form-control" th:field="*{email}" id="email" required>
                    <div th="if=${#fields.hasErrors('email')}" class="invalid-feedback">
                        <ul>
                            <li th:each="err : ${#fields.errors('email')}" th:text="${err}"></li>
                        </ul>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="telephone" class="form-label" th:text="#{profil.phone}"></label>
                    <input type="text" class="form-control" th:field="*{telephone}" id="telephone">
                    <div th="if=${#fields.hasErrors('telephone')}" class="invalid-feedback">
                        <ul>
                            <li th:each="err : ${#fields.errors('telephone')}" th:text="${err}"></li>
                        </ul>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="rue" class="form-label" th:text="#{profil.street}"></label>
                    <input type="text" class="form-control" th:field="*{rue}" id="rue">
                    <div th="if=${#fields.hasErrors('rue')}" class="invalid-feedback">
                        <ul>
                            <li th:each="err : ${#fields.errors('rue')}" th:text="${err}"></li>
                        </ul>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="code_postal" class="form-label" th:text="#{profil.postal}"></label>
                    <input type="text" class="form-control" th:field="*{code_postal}" id="code_postal">
                    <div th="if=${#fields.hasErrors('code_postal')}" class="invalid-feedback">
                        <ul>
                            <li th:each="err : ${#fields.errors('code_postal')}" th:text="${err}"></li>
                        </ul>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="ville" class="form-label" th:text="#{profil.city}"></label>
                    <input type="text" class="form-control" th:field="*{ville}" id="ville">
                    <div th="if=${#fields.hasErrors('ville')}" class="invalid-feedback">
                        <ul>
                            <li th:each="err : ${#fields.errors('ville')}" th:text="${err}"></li>
                        </ul>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="currentPassword" class="form-label" th:text="#{edit.profil.currentpassword}"></label>
                    <input type="password" class="form-control" th:field="*{currentPassword}" id="currentPassword">
                </div>

                <div class="mb-3">
                    <label for="newPassword" class="form-label" th:text="#{edit.profil.newpassword}"></label>
                    <input type="password" class="form-control" th:field="*{newPassword}" id="newPassword">
                </div>

                <div class="mb-3">
                    <label for="confirmPassword" class="form-label" th:text="#{edit.profil.confirmnewpassword}"></label>
                    <input type="password" class="form-control" id="confirmPassword" th:field="*{confirmPassword}">
                </div>
                <div class="mb-3">
                    <span th:text="#{profil.credit}"></span> <span th:text="${userProfile.credit}"></span>
                </div>
                <input type="hidden" th:field="*{id}" id="userId" th:value="${userProfile.id}">
                <div class="d-flex justify-content-end align-items-center">
                    <a class="btn btn-secondary" href="/enchere" th:text="#{edit.profil.button.cancel}"></a>
                    <button type="submit" class="btn btn-primary border-right ml-2" th:text="#{edit.profil.button.edit}"></button>
                </div>
            </div>
        </div>
    </form>
    <form th:action="@{/profil/delete}" method="post" class="mt-4">
        <button type="submit" class="btn btn-danger" th:text="#{edit.profil.button.del}"></button>
    </form>
</div>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>
