<!DOCTYPE html>
<html th:replace="~{modele-page :: layout('Inscription', ~{::link}, ~{::#container-main})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>

<body>
<div class="container py-5" id="container-main">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h2 class="text-center mb-4" th:text="#{register.title}"></h2>
                    <form th:action="@{/inscription/newUser}" method="post" th:object="${userProfile}" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="pseudo" class="form-label" th:text="#{register.pseudo.label}"></label>
                            <input type="text" class="form-control" th:field="*{pseudo}" id="pseudo" required/>
                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('pseudo')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('pseudo')}" th:text="${erreur}"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="prenom" class="form-label" th:text="#{register.prenom.label}"></label>
                            <input type="text" class="form-control" th:field="*{prenom}" id="prenom" required/>
                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('prenom')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('prenom')}" th:text="${erreur}"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="nom" class="form-label" th:text="#{register.nom.label}"></label>
                            <input type="text" class="form-control" th:field="*{nom}" id="nom" required/>
                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('nom')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('nom')}" th:text="${erreur}"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label" th:text="#{register.email.label}"></label>
                            <input type="email" class="form-control" th:field="*{email}" id="email" required/>
                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('email')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('email')}" th:text="${erreur}"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="telephone" class="form-label" th:text="#{register.telephone.label}"></label>
                            <input type="text" class="form-control" th:field="*{telephone}" id="telephone"/>
                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('telephone')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('telephone')}" th:text="${erreur}"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="rue" class="form-label" th:text="#{register.rue.label}"></label>
                            <input type="text" class="form-control" th:field="*{rue}" id="rue" required/>
                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('rue')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('rue')}" th:text="${erreur}"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="code_postal" class="form-label" th:text="#{register.code_postal.label}"></label>
                            <input type="text" class="form-control" th:field="*{code_postal}" id="code_postal" required/>
                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('code_postal')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('code_postal')}" th:text="${erreur}"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="ville" class="form-label" th:text="#{register.ville.label}"></label>
                            <input type="text" class="form-control" th:field="*{ville}" id="ville" required/>
                            <span class="is-invalid text-danger" th:if="${#fields.hasErrors('ville')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('ville')}" th:text="${erreur}"></li>
                                </ul>
                            </span>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label" th:text="#{register.password.label}"></label>
                            <input type="password" class="form-control" th:field="*{password}" id="password" required/>
                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('password')}">
                                <ul>
                                    <li th:each="erreur: ${#fields.errors('password')}" th:text="${erreur}"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="confirmPassword" class="form-label" th:text="#{register.confirm_password.label}">Confirmation du mot de passe:</label>
                            <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" required/>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">S'inscrire</button>
                    </form>
                    <form th:action="@{/enchere}" method="post">
                        <button type="submit" class="btn btn-secondary w-100 mt-3">Annuler</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
